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.

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%;
}