The text-decoration-line
CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.
When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration
shorthand property instead.
/* Single keyword */ text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; /* Multiple keywords */ 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;
The text-decoration-line
property is specified as none
, or one or more space-separated values from the list below.
none
underline
overline
line-through
blink
none | [ underline || overline || line-through || blink ]
<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; }
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. |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | ? | 36
|
No | Yes | Yes
|
blink
|
57
|
? | 26
|
No | 44 | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | ? | 36
|
Yes | 8
|
Yes |
blink
|
57
|
57
|
? | 26
|
44 | ? | 7.0 |
text-decoration
shorthand property instead.
© 2005–2018 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