更改下划线颜色

Question

我这里有这段代码：

 echo "<u><font color='red'><br>$username</font></u>";

首先，如您所见，它带有下划线 (< u >)。第二，所有文字都是红色的。好吧，有没有办法让文本（$username）保持红色但下划线保持黑色？

原文由 user1641508 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，你能做的最好的就是使用不同颜色的 border-bottom ，但这并不是 真正 的下划线。

原文由 Ignacio Vazquez-Abrams 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

现在有一个新的 css3 属性： text-decoration-color

因此，您现在可以使用一种颜色的文本和另一种颜色的文本装饰下划线……而无需额外的“换行”元素

 p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}

 <p>black text with red underline in one element - no wrapper elements here!</p>

代码笔

注意：

1. 浏览器支持 目前仅限于 Firefox 和 Chrome（自 V57 起完全支持）和 Safari

2）您还可以使用如下所示的 text-decoration 速记属性：

 <text-decoration-line> || <text-decoration-style> || <text-decoration-color>

…所以使用 text-decoration 简写 - 上面的例子就是：

 p {
  text-decoration: underline red;
}

 p {
  text-decoration: underline red;
}

 <p>black text with red underline in one element - no wrapper elements here!</p>

原文由 Danield 发布，翻译遵循 CC BY-SA 3.0 许可协议