text-decoration-line

The text-decoration-line property designates the kind of text decoration that will be displayed.

Syntax

Values can be combined, like overline and underline to render lines in both locations.

h3 {
  text-decoration-line: underline;
}

h4 {
  text-decoration-line: overline underline;
}

/* Shorthand version */
h3 {
  text-decoration: underline solid green 3px;
}

Values

none
Default value. Designates  that no line will be displayed as text decoration.

underline
Designates that a line will be placed under the text.

overline
Designates that a line will be placed over the text.

line-through
Designates that a line will be placed through the text.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of text-decoration-line? Submit a codepen.io demo and we'll showcase it here ↴