css - 从::第一个字母中删除下划线

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 部分以匹配预期的背景颜色)。不过，我认为我不建议这样做 — 看起来很可能会出现奇怪的边缘情况，这些情况看起来比开始时的全下划线效果更糟糕。