用不同颜色为 html 锚点下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10480129/
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
Underlining an html anchor with different color
提问by Umer Hayat
Is it possible to underline an anchor tag with a color other than its text color? Any example will be appreciated.
是否可以使用文本颜色以外的颜色为锚标记加下划线？任何例子将不胜感激。
EDIT:Is it possible to specify color as hex e.g. #8f867c ?
编辑：是否可以将颜色指定为十六进制，例如 #8f867c ？
回答by Salman A
You cannot specify the underline color separately, but you can use a little trick:
您不能单独指定下划线颜色，但您可以使用一个小技巧：
a {
color: red;
text-decoration: none;
border-bottom: 1px solid green;
}
Note that the border will not appear exactlywhere the underline would have appeared, sorry.
请注意，边框不会准确出现在下划线出现的位置，抱歉。
回答by Jan Han?i?
Assuming you want the "border" to only show when user moves his mouse over it you should do something like this:
假设您希望“边框”仅在用户将鼠标移到其上时显示，您应该执行以下操作：
a {
text-decoration: none;
}
a:hover {
border-bottom: 1px solid blue;
text-decoration: none;
}
回答by sandeep
It's better you can give borderto it. write like this:
最好你可以给它边界。像这样写：
a{
text-decoration: none;
color:green;
border-bottom:1px solid red;
}
Check this http://jsfiddle.net/dgc4q/
回答by Frank Nocke
Is it possible to underline an anchor tag with a color other than its text color? Any example will be appreciated.
是否可以使用文本颜色以外的颜色为锚标记加下划线？任何例子将不胜感激。
I find that weird, but I just learned: Yes, it is, if you wrap a span inside.
我觉得这很奇怪，但我刚刚了解到：是的，如果你在里面包裹一个跨度。
html:
html：
<a href='#'><span>Howdy Partner</span></a>
css (sass)
css (sass)
html
font-size: 6em
a
color: red
span
color: green
little advantage over border-bottom-solution:
与解决方案相比优势border-bottom不大：
You are certainly not affecting base-line, line-height, margin collapse, spacing between lines... (depending on situtation, border-bottom could do that)
您当然不会影响基线、行高、边距折叠、行间距......（取决于情况，border-bottom 可以做到这一点）
