我不知道是否有任何技巧来解决这个问题。
我有我的链接如下文字和想改变下划线颜色。
此链接包含许多线，需要改变下划线颜色比现有的一个打火机
使用边框底部不解决这一点，因为多行的方式。
有什么窍门来解决这个？
编辑
@Paolo Bergantino： 它的工作原理与IE8，是否有可能与IE6,7破解？
Answer 1:
如果你的意思是不同的下划线颜色比文本是什么，我能想到的唯一的事情就是周围添加链接跨度：
<span class='underline'>
<a href="#">this just<br>a test<br>of underline color</a>
</span>
然后是CSS：
span.underline {
color: red;
text-decoration: underline;
}
span.underline a {
color: blue;
text-decoration: none;
}
而你得到你想要的东西 。
编辑 ：
测试这个远一点，它不是为我工作的IE浏览器。 如果添加边框底部，然而，令人惊讶的不工作在所有浏览器，除了IE不把边框下的最后一个。 我会尽量挖掘得更深一些，看看是否有一个跨浏览器的方式做到这一点？
Answer 2:
保罗Bergantino的回答似乎并没有为我在Chrome上下工夫OSX（v19.0.1084.56）。 但是移动标签内的跨度似乎这样的伎俩。
该HTML
<a class="underline" href="#">
<span>Hello world<br />this is a test<br />of changing the underline colour</span>
</a>
和CSS
.underline{
color: red;
}
.underline span{
color: gray;
}
你可以在这里查看： http://jsfiddle.net/itsmappleby/f4mak/
Answer 3:
如果有人有兴趣 - 这为我工作 - 文本装饰色CSS属性：
.example {
text-decoration: underline;
text-decoration-color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
Answer 4:
或者你可以使用边界。 这种方法在IE6工作。
HTML
<a href="#" class='underline'>
<span>this just</span><br/>
<span>a test</span><br/>
<span>of underline color</span>
</a>
CSS
a.underline {
text-decoration: none;
}
a.underline span {
display: inline-block;
border-bottom: 1px solid red;
font-size: 15px;
line-height: 12px;
}
而例如： http://jsfiddle.net/skanY/1/embedded/result/
Answer 5:
下划线，是一个文本属性，继承了文本的颜色。 所以我怀疑有一种方法明确地改变下划线颜色也没有改变文字颜色。
Answer 6:
链接的下划线永远是颜色与文本相同。
Answer 7:
对不起ressing一个老问题，但我有同样的问题，并没有找到一个满意的答案，所以我想出了不同的解决方案，我想我会跟你分享。
它包括一个1x1的背景图片（或任何大小你喜欢），但它的干净和简单 - 和100％的浏览器兼容的（从测试IE6及以上）。
这个例子有改变颜色的文字和下划线保持不变。 你可以很容易地做到这一点其他方式。
a, a:link, a:active, a:visited{
text-decoration:none;
color:#888;
background:transparent url('underline.png');
background-position:0 10px;
background-repeat:repeat-x;
}
a:hover{
color:#009ee0;
}
Answer 8:
我知道这是一个老问题，但我想我想补充这...
a:active, a:link, a:visited{
background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%);
text-decoration: none;
background-size: 2px 2px;
background-position: 0 1.2em;
background-repeat: repeat-x;
}
注意事项：旧版浏览器支持不完全支持
Answer 9:
上链接的下划线是用文本装饰CSS样式做，我认为它的颜色与文本相同。
如果您将文字修饰为无则加边框底部，您可以更改与边框颜色风格的颜色。
Answer 10:
你也可以使用这个代码，以使不同颜色的下划线。 使用边框
h1{
border-bottom: 1px solid #AAAAAA
}
编辑：您可以使用Java脚本来绘制文本下一条线
文章来源: Changing link underline color
