CSS文本装饰下划线颜色

Question

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

只能更改文本下的线条颜色？我希望看到红色字母下面有一条蓝线,但是我找不到如何完成这件事.

Answer 1

如果将文本换行到以下范围内,则可以执行此操作:

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

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

Answer 2

(对于同行的googlers,从重复的问题复制)这个答案已经过时,因为现在大多数现代浏览器都支持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; }

希望能帮助到你.