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.
text-decoration-line
Try it
When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration
shorthand property instead.
Syntax
/* 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: revert; text-decoration-line: revert-layer; text-decoration-line: unset;
The text-decoration-line
property is specified as none
, or one or more space-separated values from the list below.
Values
-
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
Deprecated -
The text blinks (alternates between visible and invisible). Conforming user agents may not blink the text. This value is deprecated in favor of CSS animations.
Formal definition
Initial value | none |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Basic example
<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
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
text-decoration-line |
57
|
79
|
36
6-39
|
No
|
44
|
12.1
8
|
57
|
57
|
36
6-39
|
43
|
12.2
8
|
7.0
|
blink |
57
The
blink value does not have any effect.
|
79
The
blink value does not have any effect.
|
26
The
blink value does not have any effect.
|
No
|
44
|
8
|
57
The
blink value does not have any effect.
|
57
The
blink value does not have any effect.
|
26
The
blink value does not have any effect.
|
43
|
8
|
7.0
The
blink value does not have any effect.
|
See also
- When setting multiple line-decoration properties at once, it may be more convenient to use the
text-decoration
shorthand property instead, which also includes: text-underline-offset
© 2005–2021 MDN 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