Question

我正在尝试为除第一个以外的所有字母加下划线。我尝试通过::first-letter删除第一个字母的下划线但没有成功。为什么不在这里工作？

<a class="sample underline letter-underline-none"
   href="https://twitter.com/ryanve"
>@ryanve</a>

如何在不更改此标记的情况下删除下划线？使用此CSS I made a codepen。

.letter-underline::first-letter,
.underline {
  text-decoration: underline;
}

.letter-underline-none::first-letter,
.underline-none {
  text-decoration: none;
}

.sample {
  display: block;
}

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration：

文本装饰是在后代文本元素上绘制的。这意味着如果元素指定文本修饰，则子元素无法删除装饰。

（强调我的）。当然，在你的情况下，你没有真正的子元素（只是一个第一个字母的伪元素），但同样的逻辑适用。

也就是说，一些实验表明子元素可以添加其自己的下划线（覆盖祖先＆＃39; s），然后使用text-decoration-color指定该下划线的颜色。因此，在大多数情况下，通过编写类似

的内容，您可能会破坏所需的视觉效果

.letter-underline-none::first-letter {
  text-decoration: underline;
  text-decoration-color: #FFF;
}

（调整#FFF部分以匹配预期的背景颜色）。我不认为我会建议这样做 - 看起来很可能有一些奇怪的边缘情况看起来比全下划线效果更糟糕。

从:: first-letter中删除下划线

1 个答案: