The text-decoration-line
CSS property sets the kind of decoration that is used on text in an element. When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration
shorthand property instead.
/* 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;
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
Values
The text-decoration-line
property is specified as none
, or one or more space-separated values from the list below.
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
- The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. This value is deprecated in favor of CSS animations.
Formal syntax
none | [ underline || overline || line-through || blink ]
Examples
<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
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. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | Yes | ? | 36 6 — 39 -moz- | No | Yes | Yes -webkit- |
blink | 571 | ? | 261 | No | 44 | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | ? | 36 6 — 39 -moz- | No | Yes | 8 -webkit- |
blink | 571 | 571 | ? | 261 | No | 44 | ? |
1. 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.
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
mfluehr,
chrisdavidmills,
Arty-chan,
jpmedley,
Sebastianz,
Sheppy,
Jeremie,
teoli,
mariemosley,
arai,
jimmyTEDnunez,
y0ssar1an,
Aleksej,
Majken,
riginoommen,
kscarfone,
0b10011,
frankyan,
mkato,
ethertank,
FredB,
yyss
Last updated by:
fscholz,