text-decoration-line property

Image Tutorials

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.

  • Initialnone
  • Applies toall elements
  • Inheritedno
  • Mediavisual
  • Computed Valueas specified
  • Animatableno
  • Canonical orderorder 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

1 .example {
2   text-decoration-line: underline;
3   text-decoration-style: wavy;
4   text-decoration-colorred;
5 }
Rate article