Tutorial :Changing <a> link underline color


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 lines which needs to change the underline color to be lighter than the existing one

Using border bottom is not the way to solve this because multiple lines.

are there any trick to solve this?


@Paolo Bergantino: It works with IE8 , is it possible to hack with IE6,7?


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.


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


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.


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


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

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



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


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


  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/


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.


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


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


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


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.


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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »