css - CSS 文字装饰下划线颜色

Question

可能重复：
更改下划线颜色

是否可以仅更改文本下的线条颜色？我想看到下面有一条蓝线的红色字母，但我不知道如何完成这项工作。

Answer 1

如果将文本包装成如下跨度，则可以这样做：

a {
  color: red;
  text-decoration: underline;
}
span {
  color: blue;
  text-decoration: none;
}

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

Answer 2

（对于谷歌同事，从重复的问题中复制）这个答案已经过时，因为大多数现代浏览器现在都支持text-decoration-color 。

您可以通过以下 CSS 规则作为示例来执行此操作：

text-decoration-color:green

---

如果旧版浏览器不支持此规则，您可以使用以下解决方案：

使用边框底部设置您的单词：

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; }

希望能帮助到你。