Cascading Style Sheets: The Definitive Guide, Second Edition

Text Decoration

Next we come to text-decoration, which is a fascinating property that offers a whole truckload of interesting behaviors.

text-decoration

Values

none | [ underline || overline || line-through || blink ] | inherit

Initial value

none

Applies to

all elements

Inherited

no

Computed value

as specified

As you might expect, underline causes an element to be underlined, just like the U element in HTML. overline causes the opposite effect—drawing a line across the top of the text. The value line-through draws a line straight through the middle of the text, which is also known as strikethrough text and is equivalent to the S and strike elements in HTML. blink causes the text to blink on and off, just like the much-maligned blink tag supported by Netscape. Figure 6-26 shows examples of each of these values:

p.emph {text-decoration: underline;}
p.topper {text-decoration: overline;}
p.old {text-decoration: line-through;}
p.annoy {text-decoration: blink;}
p.plain {text-decoration: none;}

Figure 6-26. Various kinds of text decoration

Tip

It’s impossible to show the effect of blink in print, of course, but it’s easy enough to imagine (perhaps all too easy). Incidentally, user agents are not required to support blink, and as of this writing, Internet Explorer never has.

The value none turns off any decoration that might otherwise have been applied to an element. Usually, undecorated text ...