代码之家 › 专栏 › 技术社区 › ryanve

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

text-decorations typography pseudo-element css

0

ryanve · 技术社区 · 8 年前

除了第一个字母外,我试着在所有字母下面划下划线。我试图通过删除第一个字母的下划线 ::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;
}

1 回复 | 直到 8 年前

1

2

ruakh 8 年前

从…起 https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration :

文本装饰是跨后代文本元素绘制的。这意味着 如果元素指定了文本装饰,则子元素不能删除装饰 .

(我的重点)。当然,在您的例子中,您没有真正的子元素(只是第一个字母伪元素),但同样的逻辑适用。

也就是说,一些实验表明,子元素可以添加拥有下划线(覆盖祖先的),然后使用 text-decoration-color . 因此,在大多数情况下,你可以通过写一些类似的东西来潜在地拼凑出你想要的视觉效果

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

(调整 #FFF 零件以匹配预期背景色)。不过,我不认为我会建议这样做——看起来很可能会出现奇怪的边缘情况,这种情况看起来比一开始的全下划线效果更糟糕。