February 02, 2004

CSS Design: Custom Underlines

by Stuart Robertson

Published in: CSS, Graphic Design, HTML and XHTML |
Discuss this article »

While web designers generally have a great deal of control over how a document should be presented, basic CSS doesn’t provide many options for the style of underlines below the links on a page. But with a few nips and tucks, you can take back creative control of the way your links look.

Custom underlines allow for new creative opportunities that might be appropriate for some websites. They can also be used to provide additional visual cues to the differences between the types of links contained in a document.

Getting Started

You should start by creating a graphic for your underline. This graphic will repeat horizontally, and if you want the background to show through you’ll need to create a transparent .gif file.

If your underline graphic is more than a few pixels tall, you should increase the line-height of your text to add more space between the bottom of one line and the top of the next:

p { line-height: 1.5; }

Before we can create the custom underline for our links, we need to remove the existing one:

a { text-decoration: none; }

To create the custom underline, we will set a background image for the link element:

a { background-image: url(underline.gif); }

We want this graphic to repeat horizontaly along the bottom of our text but not vertically, or it would appear behind the link text itself. We will limit the background image to repeat along the x-axis:

a { background-repeat: repeat-x; }

To ensure that our graphic appears below the link text, regardless of font-size, we’ll use the background-position property to place the image at the bottom of the link element. For some background graphics such as arrows, you may have a preference for the side of the element to which the image is aligned. For our example, we will position our background at the bottom right:

a { background-position: 100% 100%; }

To create space for the custom underline graphic below the link text, we will add some padding. The exact position of the underline graphic relative to the baseline of the link text will vary depending on the font size being used. It’s suggested that you start with a bottom-padding equal to the height of your underline graphic and adjust to suit your needs:

a { padding-bottom: 4px; }

Since the underline graphic is positioned at the bottom of the link element, we need to ensure that our links do not span multiple lines. (If they were allowed to span multiple lines, then only the linked text on the lower line would display the custom underline.) We’ll use the CSS white-space property to prevent our link text from wrapping.

a { white-space: nowrap; }

All of the CSS properties for the link element can be combined:

a { text-decoration: none; background: url(underline.gif) repeat-x 100% 100%; padding-bottom: 4px; white-space: nowrap; }

If you want the custom underline effect to appear only during rollovers, simply set the CSS background properties to the :hover pseudo-class instead of directly on the link element.

a { text-decoration: none; padding-bottom: 4px; white-space: nowrap; } a:hover { background: url(underline.gif) repeat-x 100% 100%; }

Examples

Here are some examples of custom underlines that can be created with this technique:

This static underline and this rollover effect might match a trendy design.

This static underline and this rollover effect are groovy, baby.

This static underline and this animated rollover could be used to show external links. (Animation effects are not visible in every browser; some, such as Safari 1.0, show only the first frame.)