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

Question

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

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

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

.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：

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration.

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

也就是说，一些实验建议子元素可以添加其 自己的 下划线（覆盖祖先的下划线），然后使用 text-decoration-color.因此，在大多数情况下，您可以通过编写类似

的内容来组合您想要的视觉效果

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

（调整 #FFF 部分以匹配预期的背景颜色）。不过，我不认为我会推荐这样做——它似乎很可能有奇怪的边缘情况，看起来比开始时的全下划线效果更糟糕。

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

Remove underline from ::first-letter

css

typography

text-decorations

pseudo-element