Archive for CSS

Custom underline color for links.

Posted in Code Snippets with tags , , , , on March 18, 2013 by chrispikul510

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.

HTML

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

CSS


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.