text-decoration-line
text-decoration-line
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 |
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Syntax
/* 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;
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
none | [ underline || overline || line-through || blink ]
Example
HTML content
<p>Here's some text with wavy red underline!</p>
CSS content
p { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; }
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 wasn't a shorthand before. |
Browser compatibility
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.
© 2005–2017 Mozilla Developer Network and individual 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