Recipe 3.1 Removing Underlines from Links

Problem

Links in a web document are underlined. You want to remove the underlining, as shown in Figure 3-1.

Figure 3-1. Links without underlines

Solution

Use the text-decoration property with the pseudo-class selector for unvisited and visited links:

a:link, a:visited {
 text-decoration: none;
}

Discussion

Use the :link and :visited pseudo-classes to apply styles to links within a web document. The :link pseudo-class applies to links that the user has not visited. The :visited pseudo-class corresponds to links that the user has visited.

The text-decoration property can take up to five settings, shown in Table 3-1.

Table 3-1. Text-decoration values

Text-decoration values	Result
underline	A line is placed beneath the text.
overline	A line is placed above the text.
blink	The text flashes.
line-through	A line is placed through the middle of the text.
none	No effect is associated with the text.

These text-decoration properties are often used to enhance the presentation of a web page. Instead of having all the links in a document underlined, designers opt to set text-decoration to none in conjunction with changing the link's background color, text color, or both:

a:link, a:visited {
 text-decoration: none;
 background-color: red;
 color: white;
}

In order to complement the design for those site visitors who might have color blindness and therefore might not be able to determine a link color from the default color of regular HTML text, designers also set the weight of the font to bold:

a:link, a:visited {
 font-weight: bold;
 text-decoration: none;
 color: red;
}

The value of line-through might be an interesting element added to a page design used to indicate that a link has already been visited by a user, like an item scratched off a to-do list:

 a:link {
 font-weight: bold;
 text-decoration: none;
 color: red;
}
a:visited {
 font-weight: bold;
 text-decoration: line-through;
 color: black;
}

See Also

The CSS 2.1 specification for the text-decoration property at http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration, Jakob Neilson's updated "Design Guidelines for Visualizing Links" at http://www.useit.com/alertbox/20040510.html.