Changing link underline color

Question

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

Answer 1

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:

span.underline { 
    color: red; 
    text-decoration: underline; 
} 
span.underline a { 
    color: blue; 
    text-decoration: none; 
} 

And you get what you want.

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...

Answer 2

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.

Answer 3

the underline on links is done using the text-decoration css style, i think it's the same color as the text.

if you set the text-decoration to none then add a border-bottom you can change the color with the border-color style.

Answer 4

Or you can use border. This method work at ie6.

HTML

<a href="#" class='underline'>
  <span>this just</span><br/>
  <span>a test</span><br/>
  <span>of underline color</span>
</a>

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/