A List Apart

Menu
Issue № 169

CSS Design: Custom Underlines

by Published in CSS, HTML, Graphic Design · 66 Comments

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.)

66 Reader Comments

Load Comments