Custom underline color for links.

If you’re looking for a CSS way to change the underline color to something different then the text color, I may have your answer. The HTML is easy, especially if you want the colors universal. But you can add classes where its obvious.


<a href="#"><u> Link with custom underline color </u></a>


a, a:visited {
text-decoration: none;
color: #3C5160;
a u {
text-decoration: none;
display: inline-block;
border: none;
border-bottom: 1px solid #CDDBE2;
line-height: 90%;

The line-height line may not work on all browsers as a percentage. But its essentially optional. It just adjusts where the border is to make it look more like a proper text underline.


Leave a Reply

Fill in your details below or click an icon to log in: 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: