The CSS text-decoration-line Property

Overview

The text-decoration-line property is used to specify the type of decoration line that is added to the text content of an element. It can be used independently but is often utilized as a part of the text-decoration shorthand, providing a more efficient way to set multiple text-decoration properties.

Examples and Usage

In the following example, we'll use the text-decoration-line property to apply different types of line decoration to several text elements.

HTML Structure

<p class="decor-underline">Web Developer</p>

<p class="decor-line-through">CSS1 and CSS2</p>

<p class="decor-overline">Example text with overline</p>

<p class="decor-multiple">Example text with underline and line-through</p>

<p class="decor-shorthand">Web Reference</p>

CSS Styling

/* Applying underline decoration */
.decor-underline {
  text-decoration-line: underline;
}

/* Applying line-through decoration */
.decor-line-through {
  text-decoration-line: line-through;
}

/* Applying overline decoration */
.decor-overline {
  text-decoration-line: overline;
}

/* Applying multiple line decorations */
.decor-multiple {
  text-decoration-line: underline line-through;
}

/* Using text-decoration shorthand */
.decor-shorthand {
  text-decoration: solid underline overline orange 3px;
}

With the CSS classes applied, each paragraph element receives a unique line decoration:

The .decor-underline class adds an underline beneath the text. The line is drawn below the baseline of the text.
The .decor-line-through class applies a line-through decoration. This line is drawn over the middle of the text.
The .decor-overline class applies an overline decoration. The line is drawn above the text, at the top of the line box.
The .decor-multiple class applies two line decorations at once - an underline and a line-through, emphasizing multiple aspects of the text.

Lastly, the .decor-shorthand class demonstrates the use of the text-decoration shorthand property, which sets the decoration style, line, color, and thickness all in one statement.

Values

The text-decoration-line property accepts the following values:

Value	Description
`none`	No text decoration is applied. (Default)
`underline`	A decorative line is drawn below the text.
`overline`	A decorative line is drawn over the text.
`line-through`	A decorative line is drawn through the middle of the text.

Associated Properties

text-decoration
text-decoration-style
text-decoration-color
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-style
text-emphasis-position

Tips and Tricks

To animate line decorations, for instance, to create a blinking effect that was traditionally achieved with the now deprecated blink value, you should use CSS animations. This can be done by creating keyframes to alternate between underline and none values.
When setting multiple line decorations with text-decoration-line, remember that the order doesn't affect the output. It's more important to consider readability and maintainability in your CSS code.
If you're setting multiple text decoration properties (line, style, color, thickness), using the text-decoration shorthand can lead to cleaner and easier-to-manage code.

Browser Compatibility

Older versions of Safari (8-12), and Firefox (6-35), require vendor prefixes for proper functioning. For more details, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.