Summary
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 |
Syntax
/* 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
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 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 | 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.
Document Tags and Contributors
Tags:
Contributors to this page:
Sebastianz,
fscholz,
Sheppy,
Jeremie,
teoli,
mariemosley,
arai,
jimmyTEDnunez,
y0ssar1an,
Aleksej,
Majken,
riginoommen,
kscarfone,
bfrohs,
frankyan,
mkato,
ethertank,
FredB,
yyss
Last updated by:
Sebastianz,