更改<a>链接下划线颜色

Question

我想知道是否有任何技巧可以解决这个问题.

我的链接如下文所示,并希望更改下划线颜色.

此链接包含许多行,需要将下划线颜色更改为比现有颜色更轻

使用border bottom不是解决这个问题的方法,因为有多行.

有什么技巧可以解决这个问题吗？

编辑

@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上不适用于我.但是,如果你添加border-bottom,它会令人惊讶地在所有浏览器中都有效,除了IE没有在最后一个下面放置边框.我会尝试深入挖掘一下,看看是否有跨浏览器的方式来做到这一点......

Answer 2

Paolo Bergantino的答案似乎对我在OSX上的Chrome(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;           
}

Answer 3

如果有人有兴趣 - 这对我有用 - text-decoration-color CSS属性:

.example { 
    text-decoration: underline;
    text-decoration-color: red;
}