CSS文字装饰下划线颜色

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

有可能只改变文字下的线条颜色？ 我想看到下面有一个蓝色线条的红色字母，但我不知道如何做到这一点。

Answer 1

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

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

Answer 2

你可以做到这一点，如果你把你的文本换成一个跨度，如：

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

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

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

希望它有帮助。