如何阻止文本阴影应用于文本修饰？

Question

在CSS中，是否可以停止text-shadow应用于text-decoration？

我有一个菜单系统，在单词的第一个字母上需要一个文本阴影，（因为客户端要求打火机（白色）背景）。鼠标悬停在链接上; text-decoration已使用，效果很好，但现在有一个text-shadow元素，这也适用于text-decoration。

有没有办法解决这个问题，所以文字阴影只适用于文本而不是多余的装饰？

代码：

nav > a {
    display: block;
    vertical-align: top !important;
    background:url('/images/menu-log60.png') no-repeat left;
    padding:22px 0 22px 25px;
    padding:calc(30px - 0.5em) 0 calc(30px - 0.5em) 25px;
    margin-bottom:10px;
}
nav a {
    text-decoration:none;
    color: #000;
    display: block;
}
nav a > strong {
    color: #ffe100;
}
nav #orderingSubMenu a >strong {
    text-shadow: 1px 0 0 #721006, -1px 0 0 #721006,  0 1px 0 #721006, 0 -1px 0 #721006;
}
nav a:hover, nav a:focus {
    text-decoration:underline;
}

<nav>
  <span id="orderingSubMenu">
      <a href="/#"><strong>P</strong>rices - Loose</a>
      <a href="/#"><strong>P</strong>rices - Bags</a>
      <a href="/#"><strong>A</strong>ccount Details</a>
      <a href="/#"><strong>L</strong>og Out</a>
  </span>
</nav>

/*** Current work around ***/
nav #orderingSubMenu a:hover > strong,
nav #orderingSubMenu a:focus > strong {
     text-shadow: none;
 }

由于text- CSS规则同等地适用于所有text-部分（例如-decoration等），我找不到执行此操作的方法并怀疑无法执行此操作

当前设置：

鼠标悬停的当前问题：

当前的解决方法Soluton：

理想解决方案：

我有什么想法可以实现这个理想的解决方案？

更新1：为什么我不能使用Border-bottom

来自 CBroe and Michael_B的好主意后重新添加border-bottom我确实探索了此选项，但发现菜单的CSS设置的性质（不< / em>上面显示的所有MCVE）意味着即使将各种填充值转换为边距值也意味着在空白下面有一个边框或者布局中的文本位置发生了变化。

我想我可以重写菜单系统CSS的整个结构，但这花费的时间过长了（比这个问题更多？谁知道，但是花在这个问题上的时间+用于重新编码CSS的时间... 。）所以除非没有其他选择，否则我不想这样做。

更新2：为什么我不能使用span s

使用spans作为suggested by myf来包住阴影;这不起作用，因为text-shadow适用于所有子元素，所以我必须在锚元素的父上设置文本阴影，但仅适用于第一个字母锚文本，实际上引导我一个想法....

我误解了 Myf 的解决方法。用他的答案解决了我的问题。

更新3：无法将锚元素分解为多个部分：

我试图将锚元素分成几部分;因此，对于主要元素，文本修饰适用，但:first-letter除外，它不适用;

nav #orderingSubMenu a:first-letter:hover, nav #orderingSubMenu a:first-letter:focus {
    text-decoration: none;
    border-bottom: 1px solid #721006;
    padding-right: 0;
}

但这不起作用;我无法将锚点“打破”到组成部分。我可以创建多个锚点（一个用于第一个字母，一个用于链接的其余部分，但是当悬停时这会显得不一致，也许一些Javascript可以使两个单独的锚点表现得好像它们是统一的......

Answer 1

在文本周围添加额外的镶边内联包装：

nav a {
    text-decoration:none;
    color: #000;
    display: block;
}
nav span {
 border-bottom: 1px solid transparent;
}
nav a strong {
    color: #ffe100;
}
nav #orderingSubMenu a strong {
    text-shadow: 1px 0 0 #721006, -1px 0 0 #721006,  0 1px 0 #721006, 0 -1px 0 #721006;
}
nav a:hover span, nav a:focus span {
 border-color: black;
}

<nav>
  <span id="orderingSubMenu">
      <a href="/#"><span><strong>P</strong>rices - Loose</span></a>
      <a href="/#"><span><strong>P</strong>rices - Bags</span></a>
      <a href="/#"><span><strong>A</strong>ccount Details</span></a>
      <a href="/#"><span><strong>L</strong>og Out</span></a>
  </span>
</nav>

Answer 2

而不是text-decoration，请考虑使用border-bottom。

nav > a {
    display: block;
    vertical-align: top !important;
    background:url('/images/menu-log60.png') no-repeat left;
    padding:22px 0 22px 25px;
    padding:calc(30px - 0.5em) 0 calc(30px - 0.5em) 25px;
    margin-bottom:10px;
}
nav a {
    text-decoration:none;
    color: #000;
    display: block;
    border-bottom: 1px solid transparent; /* prevents box shifting on hover
                                             (by factoring in the border width) */
}
nav a > strong {
    color: #ffe100;
}
nav #orderingSubMenu a >strong {
    text-shadow: 1px 0 0 #721006, -1px 0 0 #721006,  0 1px 0 #721006, 0 -1px 0 #721006;
}
nav a:hover, nav a:focus {
    /* text-decoration:underline; */
    border-bottom: 1px solid black;
    display: inline-block;
    
}

<nav>
    <span id="orderingSubMenu">
        <a href="/#"><strong>P</strong>rices - Loose</a>
        <a href="/#"><strong>P</strong>rices - Bags</a>
        <a href="/#"><strong>A</strong>ccount Details</a>
        <a href="/#"><strong>L</strong>og Out</a>
    </span>
</nav>

Answer 3

正如我在评论中所写，这是一个很大的欺骗，但似乎运作得相当好。

nav > a {
        display: block;
        vertical-align: top !important;
        background:url('/images/menu-log60.png') no-repeat left;
        padding:22px 0 22px 25px;
        padding:calc(30px - 0.5em) 0 calc(30px - 0.5em) 25px;
        margin-bottom:10px;
    }
    nav a {
        text-decoration:none;
        color: #000;
        display: block;
        position: relative;
    }
    nav a > strong {
        color: #ffe100;
    }
    nav #orderingSubMenu a >strong {
        text-shadow: 1px 0 0 #721006, -1px 0 0 #721006,  0 1px 0 #721006, 0 -1px 0 #721006;
    }
    
    nav a:hover, nav a:focus {
        text-decoration:underline;
    }
    nav a:hover::before, nav a:focus::before {
        content: " ";
        position: absolute;
        bottom: 1px;
        min-width: 11px;
        min-height: 1px;
        background: #fff;
        display: inline-block;
    }
    nav a:hover::after, nav a:focus::after {
        content: " ";
        position: absolute;
        bottom: 3px;
        left: 0;
        min-width: 11px;
        min-height: 1px;
        background: #fff;
        display: inline-block;
    }

<nav>
      <span id="orderingSubMenu">
          <a href="/#"><strong>P</strong>rices - Loose</a>
          <a href="/#"><strong>P</strong>rices - Bags</a>
          <a href="/#"><strong>A</strong>ccount Details</a>
          <a href="/#"><strong>L</strong>og Out</a>
      </span>
    </nav>

Answer 4

这是我的想法

1. 停止应用＆＃39;文字装饰：强调＆＃39;强榆树
2. 在锚榆树中添加足够的空间作为占位符，以便空格将加下划线
3. 向左拉强榆树（无下划线），使其在视觉上位于占位符的顶部（带下划线）

Demo

对于第1点，我强迫强大的榆树拥有自己的堆叠环境。

strong { display:inline-block; opacity:1 }

对于第2点，由于强榆树仅包含一个字符，因此占位符应与此字符一样宽。但是，不存在2 / 3em宽的字符，所以我选择了两个（1 / 3em空格字符）s作为占位符

a:before { content:'\002004\002004' }

对于第3点，我使用负text-indent，值大致为-2 / 3em。

strong { text-indent:-0.667em }