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

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

a {    color: red;    text-decoration: underline;  }  span {    color: blue;    text-decoration: none;  }

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

Answer 2

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

You can do this via the following CSS rule as an example:

text-decoration-color:green

---

If this rule isn't supported by an older browser, you can use the following solution:

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