CSS 更改 <a> 链接下划线颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1175383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing <a> link underline color
提问by pang
I wonder if there is any trick to solve this problem.
我想知道是否有任何技巧可以解决这个问题。
I have my link as below text and want to change the underline color.
我有我的链接如下文本，并想更改下划线颜色。
This link contains in many lines which needs to change the underline color to be lighter than the existing one
此链接包含许多行，需要将下划线颜色更改为比现有颜色浅
Using border bottom is not the way to solve this because multiple lines.
使用边框底部不是解决这个问题的方法，因为多行。
are there any trick to solve this?
有什么技巧可以解决这个问题吗？
EDIT
编辑
@Paolo Bergantino: It works with IE8 , is it possible to hack with IE6,7?
@Paolo Bergantino：它适用于 IE8 ，是否可以使用 IE6,7 进行破解？
回答by Paolo Bergantino
If what you mean is a different underline color than what the text is, the only thing I can think of is to add a span around the link:
如果你的意思是与文本不同的下划线颜色，我唯一能想到的就是在链接周围添加一个跨度：
<span class='underline'>
<a href="#">this just<br>a test<br>of underline color</a>
</span>
And then the CSS:
然后是 CSS：
span.underline {
color: red;
text-decoration: underline;
}
span.underline a {
color: blue;
text-decoration: none;
}
EDIT:
编辑：
Testing this a little further, it is not working for me on IE. If you add border-bottom, however, it surprisingly does work in all browsers, except that IE does not put a border under the last one. I will try to dig a little deeper to see if there's a cross-browser way to do this...
进一步测试一下，它在 IE 上对我不起作用。但是，如果您添加 border-bottom，它会令人惊讶地适用于所有浏览器，只是 IE 不会在最后一个浏览器下放置边框。我将尝试深入挖掘，看看是否有跨浏览器的方式来做到这一点......
回答by themarkappleby
Paolo Bergantino's answer didn't seem to work for me in Chrome on OSX (v19.0.1084.56). However moving the span inside of the a tag seemed to do the trick.
Paolo Bergantino 的回答在 OSX (v19.0.1084.56) 上的 Chrome 中似乎对我不起作用。然而，在 a 标签内移动跨度似乎可以解决问题。
The HTML
HTML
<a class="underline" href="#">
<span>Hello world<br />this is a test<br />of changing the underline colour</span>
</a>?
And the CSS
和 CSS
.underline{
color: red;
}
.underline span{
color: gray;
}
You can view it here: http://jsfiddle.net/itsmappleby/f4mak/
你可以在这里查看：http: //jsfiddle.net/itsmappleby/f4mak/
回答by ColinMcDermott
In case anyone is interested - this worked for me - text-decoration-color CSS property:
如果有人感兴趣 - 这对我有用 - text-decoration-color CSS 属性：
.example {
text-decoration: underline;
text-decoration-color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
回答by lastbyte
Or you can use border. This method work at ie6.
或者你可以使用边框。这种方法在 ie6 上有效。
HTML
HTML
<a href="#" class='underline'>
<span>this just</span><br/>
<span>a test</span><br/>
<span>of underline color</span>
</a>
CSS
CSS
a.underline {
text-decoration: none;
}
a.underline span {
display: inline-block;
border-bottom: 1px solid red;
font-size: 15px;
line-height: 12px;
}
and example: http://jsfiddle.net/skanY/1/embedded/result/
回答by Joey
Underlined, being a text attribute, inherits the text's color. So I doubt there is a way to explicitly change the underline color without also changing the text color.
下划线是一个文本属性，继承了文本的颜色。所以我怀疑是否有一种方法可以在不更改文本颜色的情况下显式更改下划线颜色。
回答by Chris Pietschmann
The Underlining of links will always be the same color as the text.
链接的下划线将始终与文本颜色相同。
回答by labtoy
sorry for ressing an old question, but i was having the same issue, and didn't find a satisfying answer, so i came up with a different solution and thought i'd share it with you.
很抱歉回答了一个老问题，但我遇到了同样的问题，并且没有找到令人满意的答案，所以我想出了一个不同的解决方案，并想与您分享。
it does include a 1x1 background image (or whatever size you prefer), but it's clean and simple - and 100% browser compatible (tested from IE6 and up).
它确实包含一个 1x1 背景图像（或您喜欢的任何尺寸），但它干净简单 - 并且 100% 浏览器兼容（从 IE6 及更高版本测试）。
this example has text that changes color, and the underline stays the same. you can just as easily do it other way around.
这个例子有改变颜色的文本，下划线保持不变。你可以很容易地以其他方式做到这一点。
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;
}
回答by Paul Dessert
I know this is an old question, but I thought I'd add this...
我知道这是一个老问题，但我想我会添加这个......
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;
}
Note: Older browser support is not completely supported
注意：不完全支持旧版浏览器
回答by John Boker
the underline on links is done using the text-decoration css style, i think it's the same color as the text.
链接上的下划线是使用 text-decoration css 样式完成的，我认为它与文本颜色相同。
if you set the text-decoration to none then add a border-bottom you can change the color with the border-color style.
如果您将 text-decoration 设置为 none 然后添加一个 border-bottom 您可以使用 border-color 样式更改颜色。
回答by Sri Harsha Chilakapati
Also you can use this code to make underlines with different color. Use the Borders
您也可以使用此代码制作不同颜色的下划线。使用边框
h1{
border-bottom: 1px solid #AAAAAA
}
edit: you can use java script to draw a line under the text
编辑：您可以使用java脚本在文本下画一条线
