CSS text-decoration underline color [duplicate]

Question

Possible Duplicate:
Changing Underline color

It's possible to change only line color which is under text? I would like to see something like red letters with a blue line below it, but I can't find out how to get this done.

Answer 1

(for fellow googlers, copied from duplicate question) This answer is outdated since text-decoration-color is now supported by most modern browsers.

---

You most likely need this, by setting your word with a border-bottom.

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}

Answer 2

You can do it if you wrap your text into a span like:

a {
  color: #258;
  text-decoration: underline;
}
span {
  color: #d43;
  text-decoration: none;
}

<a href="#">
  <span>Text</span>
</a>

Answer 3

As far as I know it's not possible... but you can try something like this:

.underline 
{
    color: blue;
    border-bottom: 1px solid red;
}

<div>
    <span class="underline">hello world</span>
</div>

Answer 4

You can't change the color of the line (you can't specify different foreground colors for the same element, and the text and its decoration form a single element). However there are some tricks:

a:link, a:visited {text-decoration: none; color: red; border-bottom: 1px solid #006699; }
a:hover, a:active {text-decoration: none; color: red; border-bottom: 1px solid #1177FF; }

Also you can make some cool effects this way:

a:link {text-decoration: none; color: red; border-bottom: 1px dashed #006699; }

Hope it helps.