Make Link Text Color Different from the Link Underline Color
by Emma Dobrescu - August 18th, 2006
Sometimes when you code a page you might want to have one color for the link and a different color for the underline.
There’s a simple solution to that. You need to add a span inside the link, span that will contain the actual text of the link:
<a class="link" href="http://www.ecommercepartners.net/blog/wp-admin/yourlink.com">yourlink.com</a>
Now in the css you will apply one color for the “a” element and another color for the span:
a.link {
color:#FF0000;
text-decoration: underline;
}
a.link span {
color:#000000;
}
And your link is good to go with a brand new underline.Of course you can have a few variations of that playing with the hover states.
