CSS text-decoration

The CSS text-decoration property sets a text line decoration: underline, overline, line-through or blink in CSS2. In general it used to emphasize or differentiate portions of text. In CSS3, the property is a backward-compatible shorthand which also sets the line color and line style. This CSS3 shorthand is still not supported by most browsers and is not forward-compatible (invalid in CSS2). text-decoration is not inherited.

text-decoration: none|underline|overline|line-through|blink
text-decoration: underline;

Browser Support: Full for the CSS1 property, none for the CSS3 shorthand.

Underlining with text-decoration

The most common line decoration is, by far, underline. In CSS2 browsers the line will be solid and the same color of text. In CSS3, the property allows chosing the line style (dashed, dotted...) and color (see next sections).

text-decoration: underline;

Underlined text.

Keep in mind that the property is not inherited.

Possible Decorations

The following are the possible values of text-decoration and their results:

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

text-decoration: blink;

Blink is supposed to make the text flash but it's not supported by most browsers.

text-decoration in CSS3

CSS3 makes text-decoration a shorthand for the new text-decoration-line, text-decoration-style and text-decoration-color properties:

text-decoration: line style color

line is the type of decoration (underline, overline, line-through, blink) and the styles are the same available for borders: solid, dashed, dotted, double and wavy.

The new property is in process of being implemented. It is backward compatible but forward incompatible. What this means is that CSS2 rules work in CSS3 but a CSS3 rule specifying the three values is totally invalid in CSS2. For best, support a CSS3 text-decoration rule should provide a fallback like this:

text-decoration: underline;
text-decoration: underline dashed #25f165;

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>