CSS 文字装饰下划线颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12804419/
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
CSS text-decoration underline color
提问by Wizard
Possible Duplicate:
Changing Underline color
可能的重复：
更改下划线颜色
It's possible to change only line color which is under text? I would like to see something like red letters with a blue line below it, but I can't find out how to get this done.
是否可以仅更改文本下方的线条颜色？我想看到下面有一条蓝线的红色字母，但我不知道如何完成。
回答by Cherusker
You can do it if you wrap your text into a span like:
如果您将文本包装成一个跨度，您可以这样做：
a {
color: red;
text-decoration: underline;
}
span {
color: blue;
text-decoration: none;
}<a href="#">
<span>Text</span>
</a>回答by Rob
(for fellow googlers, copied from duplicate question) This answer is outdated since text-decoration-coloris now supported by most modern browsers.
（对于谷歌同事，从重复问题复制）这个答案已经过时，因为大多数现代浏览器现在都支持text-decoration-color。
You can do this via the following CSS rule as an example:
例如，您可以通过以下 CSS 规则执行此操作：
text-decoration-color:green
text-decoration-color:green
If this rule isn't supported by an older browser, you can use the following solution:
如果旧版浏览器不支持此规则，您可以使用以下解决方案：
Setting your word with a border-bottom:
使用边框底部设置您的单词：
a:link {
color: red;
text-decoration: none;
border-bottom: 1px solid blue;
}
a:hover {
border-bottom-color: green;
}
回答by Luis
As far as I know it's not possible... but you can try something like this:
据我所知这是不可能的......但你可以尝试这样的事情：
.underline
{
color: blue;
border-bottom: 1px solid red;
}<div>
<span class="underline">hello world</span>
</div>回答by codenighter
You can't change the color of the line (you can't specify different foreground colors for the same element, and the text and its decoration form a single element). However there are some tricks:
你不能改变线条的颜色（你不能为同一个元素指定不同的前景色，文本及其装饰形成一个元素）。不过也有一些小技巧：
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; }
Also you can make some cooleffects this way:
您也可以通过这种方式制作一些很酷的效果：
a:link {text-decoration: none; color: red; border-bottom: 1px dashed #006699; }
Hope it helps.
希望能帮助到你。
