text-decoration

The text-decoration property is used to add visual emphasis to content that is independent from the text’s font style, weight or other properties.

<p class="underline">Underlined Text</p>
<p class="overline">Overline Text</p>
<p class="strikethrough">Stricken Text</p>
<p class="blink">Blinking Text (may not work in your browser!)</p>

.underline {text-decoration: underline;}
.overline {text-decoration: overline;}
.strikethrough {text-decoration: line-through;}
.blink {text-decoration: blink;}

body {
  padding-left: 2em;
}

Prior to CSS3, the text-decoration property supported five values:

1. none, which removes any decoration
2. underline, which draws a 1px line across the text at the baseline
3. line-through, which draws a 1px line across the text at the text’s “middle” point
4. overline, which draws a 1px line across the text at the text’s “top” point
5. blink, a much-maligned property that causes the text to flash, alternating between 0 and 100% opacity

The three properties that draw lines inherit the color of the text, determined by the colorproperty. text-decoration supports the use of multiple values (text-decoration: underline overline;).

In CSS3, text-decoration is now a shorthand property, incorporating the following new properties (written in this order):

• text-decoration-line, which supports the five values from CSS 2.1, outlined above
• text-decoration-style, which supports the values solid, double, dotted, dashed, and wavy
• text-decoration-color, which supports any CSS color value

The text-decoration-color and text-decoration-style values in the shorthand are optional and default to none if not explicitly stated, so in practice writing text-decoration is fully backwards-compatible in browsers that do not support CSS3. As of June 2013, only Firefox supports the CSS3 shorthand syntax.

Browser Support