text-decoration

Avatar of Sara Cope
Sara Cope on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

h3 {
  text-decoration: underline;
}

Values

  • none: no line is drawn, and any existing decoration is removed.
  • underline: draws a 1px line across the text at its baseline.
  • line-through: draws a 1px line across the text at its “middle” point.
  • overline: draws a 1px line across the text, directly above its “top” point.
  • inherit: inherits the decoration of the parent.

The blink value is in the W3C spec, but it is deprecated and will not work in any current browser. When it worked, it made the text appear to “blink” by rapidly toggling it between 0% and 100% opacity.

Demo

Usage Notes

You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines:

p {
  text-decoration: overline underline line-through;
}

By default, the line or lines inherit the color of the text as set by its color property. You can change this in browsers that support the text-decoration-color property or the three-value shorthand property.

text-decoration as a Shorthand Property

text-decoration can be used in combination with text-decoration-style and text-decoration-color as a shorthand property:

.fancy-underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
 
  /* can be shortened to */
  text-decoration: underline wavy red;
}

Currently only Firefox supports this unprefixed. Safari supports it with the -webkit prefix. Chrome also needs the -webkit prefix and experimental web platform features enabled in Chrome flags.

Browser support

All browsers support the CSS2.1 “longhand” property text-decoration. The shorthand property and the sub-properties text-decoration-color, text-decoration-line, and text-decoration-style are supported unprefixed in Firefox, and with the -webkit prefix in Safari. Chrome will also recognize those values with the -webkit prefix and Experimental Web Platforms flag enabled.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
125126No122TP

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312217.4*

More Information