CSS Reference Guide: text-decoration

The CSS text-decoration shorthand property allows you to add and style decorative lines on text.

Jump ahead:

• Demo
• Component properties
  • text-decoration-line
  • text-decoration-style
  • text-decoration-color
  • text-decoration-thickness

The property’s syntax is as follows:

text-decoration: line | style | color | thickness

Demo

See the Pen
CSS Text Decoration Example by Solomon Eseme (@kaperskyguru)
on CodePen.

Component properties

The CSS text-decoration shorthand is made up of four component properties. Consider the following example:

p {
  text-decoration: underline solid red 0.1em;
}

// explodes to:

p {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 0.1em
}

We explore each component property in depth below.

text-decoration-line

Sets the line style for the text-decoration.

Values

• underline: Displays a line under the text
• line-through: Strikes a line through the text
• overline: Displays a line over the text
• blink: The text continuously alternates between visible and invisible — in other words, it blinks. This value has been deprecated in favor of CSS animations
• none: Produces no line

Usage

p {
  text-decoration-line: underline | line-through | overline | blink | none
}

text-decoration-style

Sets the style of the line to be displayed on the text.

Values

• solid: Draws a solid line
• double: Draws a double line
• dotted: Draws a dotted line
• dashed: Draws a dashed line
• wavy: Draws a wavy line

Usage

p { 
  text-decoration-style: solid | double | dotted | dashed | wavy;
}

text-decoration-color

Sets the color of the line to be displayed on the text.

Values

As with all CSS colors, values can be supplied by keyword, hex code, RGB/RGBA values, or HSL/HSLA values.

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

Usage

p {
  text-decoration-color: currentcolor | red | #00ff00 | rgba(255, 128, 128, 0.5) | transparent;
}

text-decoration-thickness

Sets the stroke thickness of the line drawn on the text.

N.B., text-decoration-thickness is currently supported only in the latest versions of Firefox and Safari.

Values

• auto: Allows the browser to chooses an appropriate width for the text decoration line
• from-font: Allows the thickness of the line to be determined by the font file for the text. If no information on thickness is supplied in the font file, the value defaults to auto
• length: Allows the developer to specify any length value (e.g., 1px, 2em, etc.)
• percentage: Allows the developer to specify a percentage value for the line thickness

Usage

p {
  text-decoration-thickness: auto | from-font | 0.2em | 3px | 10%;
}

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — Start monitoring for free.