问更改下划线颜色

EN

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

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

所以你现在可以有一种颜色的文本和一种不同颜色的文本装饰下划线...不需要额外的'wrap‘元素

​

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>

​

Codepen

NB:

1) Browser Support目前仅限于火狐和Chrome (从V57开始完全支持)和Safari

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

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

使用text-decoration速记的...so -上面的例子很简单：

p {
  text-decoration: underline red;
}

​

p {
  text-decoration: underline red;
}

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

​

来自作者的更新：

此答案已过时，因为大多数现代浏览器现在都支持 。

：伪+ em

为了在不引入额外text-decoration:underline标记的情况下准确地复制原生HTML 的大小、笔触宽度和位置，您应该使用具有em单元的pseudo-element。这允许在没有额外标记的情况下精确缩放元素和本机行为。

CSS

`a {
  text-decoration: none;
  display: inline-table;
}

a:after {
  content: "";
  border-bottom: 0.1em solid #f00;
  display: table-caption;
  caption-side: bottom;
  position: relative;
  margin-top:-0.15em;
}`

通过在伪元素和display inline-table上使用display:table-caption和caption-side，我们可以强制浏览器精确地垂直对齐线条和链接，即使在缩放时也是如此。

在本例中，我们使用inline-table而不是inline-block来强制显示伪，而不需要指定高度或负值。

示例

: https://jsfiddle.net/pohuski/8yfpjuod/8/

: http://codepen.io/pohuski/pen/vEzxPj | (example with scaling)

在上成功测试

Internet Explorer: 8、9、10、11

火狐: 41，40，39，38，37，36

铬: 45，44，43，42

Safari: 8，7，6.2

移动Safari: 9.0，8.0

Android浏览器: 4.4，2.3

海豚移动: 8，11.4