text-decoration property CSS Reference

Definition and Usage

The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink.

Underline and overline decorations are positioned under the text, line-through over it.

Note: CSS Text Decoration Level 3 transformed this property as a shorthand for the three new text-decoration-color, text-decoration-line, and text-decoration-style CSS properties. Like for any other shorthand property, it means that it resets their value to their default if not explicitely set in the shorthand.

• Initial the concatenation of the initial values of its longhand properties:
  • text-decoration-color: currentColor
  • text-decoration-style: solid
  • text-decoration-line: none
• Applies to all elements
• Inherited no
• Media visual
• Computed Value as each of the properties of the shorthand:
  • text-decoration-line: as specified
  • text-decoration-style: as specified
  • text-decoration-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
• Animatable as each of the properties of the shorthand:
  • text-decoration-color: yes, as a color
  • text-decoration-style: no
  • text-decoration-line: no
• Canonical order order of appearance in the formal grammar of the values

Syntax

Formal syntax: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

Values

Accepts one or more whitespace separated values:

none

Produces no text decoration.

underline

Each line of text is underlined.

overline

Each line of text has a line above it.

line-through

Each line of text has a line through the middle.

blink 

Is a keyword making the text slowlyblinks. Though valid, the effect is deprecated and the specification allows browser to ignore this value.

Examples

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

<h1 class="under">Underlined Header</h1>
<p class="line">If you want to strike out text, use line-through.</p>
<p class="blink">This text might blink for you - if you use Explorer, it will not.</p>
<h1 class="over">and now an overlined header.</h1>
<p>This <a class="none" href="textdecoration.html">link will not be underlined</a> , as most links are by default.  Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p>
<p class="underover">This text has both underline and overline.</p>

Compatibility

Desktop browsers

Mobile browsers