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

The Underlining of links will always be the same color as the text.

Answer 2

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

Answer 3

In case anyone is interested - this worked for me - text-decoration-color CSS property:

.example { 
    text-decoration: underline;
    text-decoration-color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

Answer 4

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

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

Answer 5

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

Answer 6

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.

The HTML

<a class="underline" href="#">
    <span>Hello world<br />this is a test<br />of changing the underline colour</span>
</a>​

And the CSS

.underline{
    color: red;           
}

.underline span{
    color: gray;           
}

You can view it here: http://jsfiddle.net/itsmappleby/f4mak/