CSS Cookbook

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