CODEWITHSUNDEEP
csscross-browser
pang
pang

Reputation: 4154

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?

EDIT

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

Upvotes: 30

Views: 59360

Answers (11)

Devmyselz
Devmyselz

Reputation: 460

USE:

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

Upvotes: 0

ColinMcDermott
ColinMcDermott

Reputation: 367

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.

Upvotes: 19

themarkappleby
themarkappleby

Reputation: 704

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/

Upvotes: 15

Paul Dessert
Paul Dessert

Reputation: 6389

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

Upvotes: 1

lastbyte
lastbyte

Reputation: 115

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/

Upvotes: 3

labtoy
labtoy

Reputation: 198

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

Upvotes: 1

Sri Harsha Chilakapati
Sri Harsha Chilakapati

Reputation: 11940

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

Upvotes: -1

Paolo Bergantino
Paolo Bergantino

Reputation: 488384

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

Upvotes: 35

Chris Pietschmann
Chris Pietschmann

Reputation: 29885

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

Upvotes: 2

Joey
Joey

Reputation: 354416

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.

Upvotes: 2

John Boker
John Boker

Reputation: 83699

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.

Upvotes: 0

Related Questions