Web/CSS/text-decoration-line

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.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error

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	Status	Comment
CSS Text Decoration Module Level 3The 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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`text-decoration-line`	Chrome Full support 57	Edge Full support 79	Firefox Full support 36 Full support 36 No support 6 — 39 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 44	Safari Full support 12.1 Full support 12.1 Full support 8 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 36 Full support 36 No support 6 — 39 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	Opera Android Full support 43	Safari iOS Full support 12.2 Full support 12.2 Full support 8 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 7.0
`blink` Deprecated'	Chrome Full support 57 Notes' Full support 57 Notes' Notes' The `blink` value does not have any effect.	Edge Full support 79 Notes' Full support 79 Notes' Notes' The `blink` value does not have any effect.	Firefox Full support 26 Notes' Full support 26 Notes' Notes' The `blink` value does not have any effect.	IE No support No	Opera Full support 44	Safari Full support 8	WebView Android Full support 57 Notes' Full support 57 Notes' Notes' The `blink` value does not have any effect.	Chrome Android Full support 57 Notes' Full support 57 Notes' Notes' The `blink` value does not have any effect.	Firefox Android Full support 26 Notes' Full support 26 Notes' Notes' The `blink` value does not have any effect.	Opera Android Full support 43	Safari iOS Full support 8	Samsung Internet Android Full support 7.0 Notes' Full support 7.0 Notes' Notes' The `blink` value does not have any effect.

Legend

Full support: Full support
No support: No support
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.
See implementation notes.': See implementation notes.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.