text-decoration

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.

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors. For example, in the markup <p>This text has <em>some emphasized words</em> in it.</p>, the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined. The style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined. However, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some emphasized words".

Initial value	as each of the properties of the shorthand: text-decoration-color: currentcolor text-decoration-style: solid text-decoration-line: none
Applies to	all elements. It also applies to ::first-letter and ::first-line.
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 rgba(0,0,0,0).
Animation type	as each of the properties of the shorthand: text-decoration-color: a color text-decoration-style: discrete text-decoration-line: discrete
Canonical order	order of appearance in the formal grammar of the values

Syntax

/* Keyword values */
text-decoration: none;                 /* No text decoration */
text-decoration: underline red;        /* Red underlining */
text-decoration: underline wavy red;   /* Red wavy underlining */

/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Values

The text-decoration property is a shorthand and can use the values of each of the three longhand properties: text-decoration-line, text-decoration-color, and text-decoration-style

Formal syntax

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

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>

Specifications

Specification	Status	Comment
CSS Text Decoration Level 3 The definition of 'text-decoration' in that specification.	Candidate Recommendation	Transformed into a shorthand property. Added support for the value of text-decoration-style.
CSS Level 2 (Revision 1) The definition of 'text-decoration' in that specification.	Recommendation	No significant changes
CSS Level 1 The definition of 'text-decoration' in that specification.	Recommendation	Initial definition

Browser compatibility

[1] The blink value does not have any effect.

[2] Safari doesn't support text-decoration-style.

[3] This version of Gecko has a partial implementation.

See also

• The list-style attribute controls the appearance of items in HTML <ol> and <ul> lists.