text-decoration-line

The text-decoration-line CSS property sets the kind of decoration that is used on text in an element. When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

/* Keyword values */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: underline overline;               /* Two decoration lines */
text-decoration-line: overline underline line-through;  /* Multiple decoration lines */
/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;

Initial value	`none`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	order of appearance in the formal grammar of the values

Syntax

Values

The text-decoration-line property is specified as none, or one or more space-separated values from the list below.

none: Produces no text decoration.
underline: Each line of text has a decorative line beneath it.
overline: Each line of text has a decorative line above it.
line-through: Each line of text has a decorative line going through its 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 CSS animations.

Formal syntax

none | [ underline || overline || line-through || blink ]

Examples

<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>

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

Specifications

Specification	Status	Comment
CSS Text Decoration Module Level 3 The definition of 'text-decoration-line' in that specification.	Candidate Recommendation	Initial definition. The `text-decoration` property is now a shorthand to define multiple related properties.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	6.0 (6.0) -moz^[1] 36.0 (36.0)	No support	(Yes)	7.1 -webkit
`blink`	57	26.0 (26.0)^[2]	No support	44	?

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic Support	(Yes)	(Yes)	6.0 (6.0) -moz^[1] 36.0 (36.0)	No support	(Yes)	8 -webkit
`blink`	57	57	26.0 (26.0)^[2]	No support	44	?

[1] The prefixed version was removed in Gecko 39.0 (Firefox 39.0 / Thunderbird 39.0 / SeaMonkey 2.36).

[2] The value is considered valid, but no blinking will happen, as the spec allows user agents to ignore it.