HomeArticles

Customized Underlines

To apply underlines to links that are slightly different than the simple text-decoration: underline, you can switch off the underline and use some other jiggery-pokery to achieve underlining effects.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

You can apply a border to the bottom of the link, which gives you control over the color of the underline (whereas text-decoration will only apply an underline in the same color as the text of the link itself) and also the pattern of the border:


a {
	text-decoration: none;
	border-bottom: 2px dotted #0c0;
}

Another way to apply more interesting underlines to links is to use small background images aligned to the bottom of the link that repeat horizontally:


p {
	line-height: 2;
}

a {
	text-decoration: none;
	padding-bottom: 5px;
	background: url(images/underline_greenspots.gif) bottom repeat-x;
}

If you use this approach, you'll need to make sure that the containing block (in this case a paragraph) has the room for the underline. Usually, you'll also need to add a little padding at the bottom of the link, so that the background image falls under the text, rather than behind it.