Question

可能重复：
Changing Underline color

可以仅更改文本下的线条颜色吗？我希望看到类似红色字母的东西，下方有一条蓝线，但我无法找到如何完成这项工作。

Answer 1

如果将文本包装成如下所示的范围，则可以执行此操作：

a {
  color: #258;
  text-decoration: underline;
}
span {
  color: #d43;
  text-decoration: none;
}

<a href="#">
  <span>Text</span>
</a>

Answer 2

（对于同行的googlers，从duplicate question复制）此答案已过时，因为现在大多数现代浏览器都支持text-decoration-color。

你最有可能需要这个，通过设置一个边框底部的单词。

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}

Answer 3

据我所知，这是不可能的......但你可以尝试这样的事情：

.underline 
{
    color: blue;
    border-bottom: 1px solid red;
}

<div>
    <span class="underline">hello world</span>
</div>

Answer 4

您无法更改线条的颜色（您不能为同一元素指定不同的前景色，文本及其装饰形成单个元素）。但是有一些技巧：

a:link, a:visited {text-decoration: none; color: red; border-bottom: 1px solid #006699; }
a:hover, a:active {text-decoration: none; color: red; border-bottom: 1px solid #1177FF; }

此外，您可以通过以下方式制作一些酷效果：

a:link {text-decoration: none; color: red; border-bottom: 1px dashed #006699; }

希望它有所帮助。

CSS文本装饰下划线颜色

4 个答案: