CSS text-decoration-line property

Definition and Usage

The text-decoration-line property sets the type of text decoration to be used (underline, overline, line-through).

Tip:Please also refer to the text-decoration property, which is a shorthand property for text-decoration-line, text-decoration-style, and text-decoration-color.

Note:You can also combine multiple values, such as underline and overline, to display lines above and below the text at the same time.

See also:

CSS Tutorial:CSS Text

HTML DOM Reference Manual:textDecorationLine Property

Example

Set different text-decoration line types:

div.a {
  text-decoration-line: overline;
}
div.b {
  text-decoration-line: underline;
}
div.c {
  text-decoration-line: line-through;
}
div.d {
  text-decoration-line: overline underline;
}

Try it Yourself

CSS Syntax

text-decoration-line: none|underline|overline|line-through|initial|inherit;

Property Value

Value Description
none Default Value. Specifies that text-decoration has no line.
underline Specifies a line below the text.
overline Specifies a line above the text.
line-through Specifies a line crossing through the text.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical Details

Default Value: none
Inheritance: No
Animation Creation: Not supported. See also:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.textDecorationLine="overline"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
57.0 79.0 36.0
6.0 -moz-		 12.1
7.1 -webkit-		 44.0