Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

text-decoration

The text-decoration property allows you to use decorative effects for text. For example:

h2 {text-decoration: underline;}
h2 {text-decoration: line-through;}

The possible values are underline, overline, line-through, blink and none.

Underline gives the same effect as the <u> tag; overline puts a line above the text. You might use overline above a heading (some printed documents use this style of heading). You can even combine the two:

h2 {text-decoration: underline,overline;}

You might find browsers underline and overline everything, including spaces and punctuation. Underlines may also overwrite character descenders.

Be careful with underline, people might think that the text is a link and get confused if it isn't.

Blink makes text blink. Except it doesn't in Internet Explorer, only in Netscape. I’m with Microsoft on this one; blinking text is annoying and ugly. The specification says that browsers don’t have to support the blink effect and it isn’t a great loss.

Line-through creates the strike through effect like the one Microsoft Word uses to show deleted text if you switch on revision marks. I wouldn't expect to use it much. Legal eagles might like this to show where laws change or you could use it to show price cuts.

The colour of the text decoration is the same as the colour associated with the tag.

Most tags don’t have any text decoration but <a> and <u> have underline and <s> and <strike> have line-through.

This property has no effect if a tag has no text (like the <img> tag) or is empty.

Internet Explorer 3.0 does not support either overline or blink.