CSS - text-decoration-line

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

Example

HTML Content

HTML

Copy Code

<p>Here's some text with wavy red underline!</p>

CSS Content

CSS

Copy Code

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

Syntax

CSS

Copy Code

/* Keyword values */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
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;

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.
-moz-anchor-decoration: The text is decorated as an anchor; not suitable for web content.

Formal syntax

CSS

Copy Code

none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> underline <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> overline <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> line-through <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> blink <a href="css/value_definition_syntax#brackets" title="Brackets">]</a>

Description

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

Underline decorations are positioned under the text, overline decorations are positioned above the text, and line-through decorations are positioned through the middle of the text.

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

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

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic Support	Not supported	Not supported^[3]	6.0 (6.0) -moz^[1] 36.0 (36.0)	Not supported	Not supported	8 -webkit
`blink`	Not supported	Not supported	26.0 (26.0)^[2]	Not supported	Not supported	?

[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.

[3] See WebKit bug 90959.

Specifications

Specification	Status	Comment
CSS Text Decoration Level 3 The definition of 'text-decoration-line' in that specification.	Candidate Recommendation	Initial definition. The `text-decoration` property wasn't a shorthand before.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/text-decoration-line

CSS CSS Property CSS Text Reference