30

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?

EDIT

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

5
  • It doesn't work for me on IE7 either, actually. That's odd. Jul 24, 2009 at 2:10
  • ah, I test wrong windows, only works on IE8
    – pang
    Jul 24, 2009 at 2:17
  • Sorry, I haven't been able to come up with anything. Jul 24, 2009 at 2:51
  • That's ok, I have try it too but not yet find anything yet. Thanks for your help :)
    – pang
    Jul 24, 2009 at 2:58
  • In 2021 you can use text-decoration-color stackoverflow.com/a/29996777/3335517 Jun 21, 2021 at 10:58

11 Answers 11

35

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

3
  • This example could be even cooler if every major browser supported the :before and :after pseudo-selector. Jul 24, 2009 at 1:37
  • 1
    That's going to affect all link selectors, so a user won't be able to distinguish what link they have visited.
    – OMG Ponies
    Jul 24, 2009 at 1:40
  • I shall be making a note of this for future reference, its so simple yet works perfectly.
    – MitMaro
    Jul 24, 2009 at 1:45
18

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

2121 update: this works great! Other useful CSS is https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset for controlling the distance between the underline and the text.

4
  • 1
    The ideal solution, but its still not supported by chrome :(
    – Niahc
    Dec 20, 2016 at 16:52
  • 1
    This is the property to use for modern browsers.
    – xji
    Sep 21, 2018 at 17:57
  • 3
    As of today all major browsers support this property.
    – Gavin
    Nov 9, 2020 at 13:03
  • This is the one.
    – Ryan
    Jan 22 at 18:24
15

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/

1
  • Works on FF, IE6-10, Chrome, Safari.
    – user246672
    May 16, 2013 at 23:59
3

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/

4
  • -1 the downside of this is you have to pay closer attention to the content of the <a> tag. If the text is wrapping within a box, rather than you inserting breaks this isn't going to work. Jan 13, 2013 at 15:58
  • actually, you can replace "inline-block" to "inline", and this works, but not correctly
    – lastbyte
    Jan 14, 2013 at 11:09
  • If you could explain that in your answer I can remove my downvote! Apparently I can't until the answer is edited. In what way does it not work correctly though? Jan 14, 2013 at 11:15
  • You can remove "inline-block" like this jsfiddle.net/skanY/4. Then if the text is wrapping within a box, underline correctly show, but lower than in shold be.
    – lastbyte
    Jan 14, 2013 at 14:34
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.

2

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

1

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

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

1

USE:

<a href="your-link/" style="text-decoration-color: COLOROFUNDERLINE;">
0

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.

0
-1

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

1
  • 1
    Welcome to Stack Overflow! Unfortunately your answer doesn't seem helpful here: the OP said specifically that "Using border bottom is not the way to solve this because multiple lines." Nov 3, 2011 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.