不知道有没有什么技巧可以解决这个问题。
我的链接如下文所示，想更改下划线颜色。
此链接包含多行，需要将下划线颜色更改为比现有颜色浅
使用边框底部不是解决这个问题的方法，因为多行。
有什么技巧可以解决这个问题吗？
编辑
@Paolo Bergantino：它适用于 IE8，是否可以用 IE6,7 破解？
【问题讨论】：
标签： css cross-browser
或者你可以使用边框。此方法适用于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;
}
【讨论】：
如果有人感兴趣 - 这对我有用 - text-decoration-color CSS 属性：
.example {
text-decoration: underline;
text-decoration-color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
2121 更新：这很好用！其他有用的 CSS 是 https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset，用于控制下划线和文本之间的距离。
【讨论】：
如果您的意思是与文本不同的下划线颜色，我唯一能想到的就是在链接周围添加一个跨度：
<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 上对我不起作用。但是，如果您添加border-bottom，它在所有浏览器中都可以正常工作，只是IE 没有在最后一个下添加边框。我会尝试更深入地挖掘，看看是否有跨浏览器的方式来做到这一点......
【讨论】：
:before 和:after 伪选择器，这个例子会更酷。
Paolo Bergantino 的回答似乎不适用于我在 OSX 上的 Chrome (v19.0.1084.56) 上。然而，在 a 标签内移动 span 似乎可以解决问题。
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;
}
【讨论】：
下划线，作为文本属性，继承了文本的颜色。所以我怀疑是否有一种方法可以显式更改下划线颜色而不更改文本颜色。
【讨论】：
链接的下划线将始终与文本颜色相同。
【讨论】：
很抱歉提出一个老问题，但我遇到了同样的问题，但没有找到令人满意的答案，所以我想出了一个不同的解决方案，并想与你分享。
它确实包含 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;
}
【讨论】：
我知道这是一个老问题，但我想我会添加这个......
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;
}
注意：不完全支持旧浏览器支持
【讨论】：
链接上的下划线是用text-decoration css样式完成的，我认为它与文本颜色相同。
如果您将 text-decoration 设置为 none 然后添加一个border-bottom，您可以使用border-color 样式更改颜色。
【讨论】：
您也可以使用此代码制作不同颜色的下划线。使用边框
h1{
边框底部：1px 实心#AAAAAA
}
编辑： 你可以使用java脚本在文本下画一条线
【讨论】：