text-decoration-line property

Author admin Reading 1 min Views 441 Published by February 15, 2012 Modified by October 15, 2024

Contents

Definition and Usage
Syntax
Values
Examples

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

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