text-decoration-line

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

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: 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

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]

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

Specification
CSS Text Decoration Module Level 3 # text-decoration-line-property

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`text-decoration-line`	57	79	366–39	44	12.18	57	366–39	43	12.28	7.0	57
`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.	44	8	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.	57 The `blink` value does not have any effect.
`grammar-error`	121	121	No	107	No	121	No	81	No	25.0	121
`line-through`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`none`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`overline`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`spelling-error`	121	121	No	107	No	121	No	81	No	25.0	121
`underline`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83