CSS: Links With Different Color Underlines

Posted on: October 24, 2006

If you’ve ever wondered how you could get a link to be one color and the underline to be another color, you’ve come to the right place. While this isn’t supported in CSS (yet, maybe one day), we can do something that will appear to do the same thing.

Here’s the CSS:

a {
color: #F00;
border-bottom: 1px Solid #00F;
text-decoration: none;

It’s extremely simple. Since all elements have a margin and padding, and they are all defined by boxes, we can add a border to one side of the element: the bottom. You can change the element to support your action selectors (hover, visited, link, active) and setup more complex things…like having only the underline color change on hover.

To change the underline color on hover only…

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

a:hover {
border-bottom-color: green;

You could also set the initial border to transparent instead of a color, then give it a color on hover and have the same underline-on-hover behavior as using text-decoration underlines, but with the additional flexibility of using the bottom border without the text shifting on hover.


5 Responses to "CSS: Links With Different Color Underlines"

You only need an extra tag for your different outline color.


b tag inside your link to hover to a different underline color.

<a><b>text here</b></a>

a {
color: #0000ff;
text-decoration: underline;
a:hover {
color: #cc0000;
text-decoration: underline;
a:hover b {
color: #0000ff;

You should be seeing a blue link which underline becomes red on rollover.
Basically you just change the whole font color and then set the b tag back to its original color. Underline color won’t revert since it’s applied by the parent tag, not by the b one.

I’m using it in a few places in my site


The solution you’ve proposed is less semantic, requires additional markup and CSS, and introduces nothing additional.

I’ve updated the article to show changing the color on hover.

The problem I’m encountering is that the bottom-border is now a pixel below where an underline should be… and it’s bugging a client of mine! *rips hairs out*

Thanks Sergio! Exactly what I was looking for. The other method, while less markup doesn’t look quite right. Though I do use it in other places when looking for a heavier underline.

I wouldn’t recommend designers to do that 😉

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: