CSS: Links With Different Color Underlines
Posted by: Corey 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.
2 Responses to "CSS: Links With Different Color Underlines"
August 7, 2009 at 2:30 pm
Sergio,
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.
August 7, 2009 at 2:26 pm
You only need an extra tag for your different outline color.
e.g.
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 http://seosumo.com/design