Underlining an html anchor with different color

问题

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 ?

回答1:

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 exactly where the underline would have appeared, sorry.

回答2:

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;
}

回答3:

It's better you can give border to it. write like this:

a{
text-decoration: none;
color:green;
border-bottom:1px solid red;
}

Check this http://jsfiddle.net/dgc4q/

回答4:

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:

<a href='#'><span>Howdy Partner</span></a>

css (sass)

html
  font-size: 6em

a
  color: red

span  
  color: green

little advantage over border-bottom-solution:

You are certainly not affecting base-line, line-height, margin collapse, spacing between lines... (depending on situtation, border-bottom could do that)

来源：https://stackoverflow.com/questions/10480129/underlining-an-html-anchor-with-different-color

标签

html

css

anchor