Definition and Usage

The text-decoration-line property specifies the types of line decorations applied to text.

Basic Example

CSS Live Demo: text-decoration-line Click the demo button below!

Formal syntax

CSS 
selector {
    text-decoration-line: none | [ underline || overline || line-through || blink ]
}

Values

The text-decoration-line property determines which line decorations, if any, are applied to the text. The following values define how those decorations appear:

Accepted values for the text-decoration-line property
none No text decoration is applied.
underline Each line of text is underlined.
overline Each line of text has a line above it.
line-through Each line of text is struck through.
blink The text blinks. Browser support is limited, and usage is discouraged.
(View browser compatibility)
spelling-error A red wavy or dotted line appears under the text to indicate a spelling error.
(Non-standard in CSS3, View browser compatibility)
grammar-error A gray or green wavy or dotted line appears under the text to indicate a grammar error.
(Non-standard in CSS3, View browser compatibility)

Syntax

CSS 
/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/* Multiple keywords */
text-decoration-line: underline overline;
text-decoration-line: overline underline line-through;

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

Formal definition

Formal definition of the text-decoration-line property
Initial value none
Applies to all elements
Inherited no
Animatable no

Practical Examples

Below are practical examples showing how to apply the text-decoration-line property to text. These cover both single-value and multi-value use cases, along with accessibility considerations.

Single Keyword Value

HTML 
<p>The text-decoration-line value is underline.</p>
CSS 
p {
    text-decoration-line: underline;
}
Rendered Output

Multiple Keyword Values

The text-decoration-line property accepts multiple values separated by spaces.

HTML 
<p>Multiple text-decoration-line values applied to text.</p>
CSS 
p {
    text-decoration-line: underline overline;
}
Rendered Output

Discouraged Usage

Do not use the CSS line-through value to indicate cancellation or deletion unless the <del> tag is semantically appropriate.

Using text-decoration-line: line-through purely for visual effect—such as to suggest that something has been canceled—is not recommended. As shown in the example below, relying on style alone to convey meaning can confuse screen reader users and negatively impact accessibility.
For content that represents deletion or cancellation, use the semantic <del> tag instead.

HTML 
<p>Do not use CSS to visually indicate deletion unless the del tag is appropriate.</p>
CSS 
p {
    text-decoration-line: line-through;
}
Rendered Output

Below is a proper example using the semantic <del> tag to indicate deletion.

HTML 
<p>
    <del>
        Do not use CSS to visually indicate deletion unless the del tag is appropriate.
    </del>
</p>

Most modern browsers render the <del> tag with a strikethrough to visually indicate deleted content.

Rendered Output

Browser compatibility

Browser compatibility for the text-decoration-line property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
text-decoration-line 57 79 36 12.1

See more details on caniuse.com.

Specifications

Specification for the text-decoration-line property
Specification
text-decoration-line CSS Text Decoration Module Level 3
#text-decoration-line-property

References

See also