text-decoration-line property CSS Reference

Definition and Usage

The text-decoration-line CSS property sets what kind of line decorations are added to an element.

Underline and overline decorations are positioned under the text, line-through over it.

• Initial none
• Applies to all elements
• Inherited no
• Media visual
• Computed Value as specified
• Animatable no
• Canonical order order of appearance in the formal grammar of the values

Syntax

Formal syntax: none | [ underline || overline || line-through || blink ]

text-decoration-line: none /* This is the only keyword that cannot be mixed with other */
text-decoration-line: underline
text-decoration-line: overline
text-decoration-line: line-through
text-decoration-line: underline overline
text-decoration-line: overline underline line-through
text-decoration-line: inherit

Values

Accepts none, or one or more whitespace separated values:

none

Produces no text decoration.

underline

Each line of text is underlined.

overline

Each line of text has a line above it.

line-through

Each line of text has a line through the middle.

blink

The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. This value is deprecated in favor of Animations.

Examples

.example {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

Compatibility

Desktop browsers

Mobile browsers