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 ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.