CSS Text Decoration

CSS Text Decoration

CSS text decoration properties control decorative lines such as underlines, overlines, and lines through text.

The text-decoration shorthand can specify the decoration line, color, style, and thickness in a single declaration. Individual properties are also available when only one part of the decoration needs to be changed.

text-decoration Syntax

The text-decoration shorthand property can be used to create and style a decorative line on text.

p {
  text-decoration: underline;
}

This rule adds an underline to the text inside matching <p> elements.

Decoration Lines

The text-decoration-line property determines which type of decorative line is displayed.

.underline {
  text-decoration-line: underline;
}
.overline {
  text-decoration-line: overline;
}
.deleted {
  text-decoration-line: line-through;
}

More than one decoration line can also be specified.

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

Decoration Color

The text-decoration-color property sets the color of the decorative line independently from the text color.

p {
  text-decoration-line: underline;
  text-decoration-color: steelblue;
}

The property accepts CSS color values, including named colors, HEX, RGB, HSL, and other supported color formats.

Decoration Style

The text-decoration-style property controls the appearance of the decoration line.

p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

Decoration Thickness

The text-decoration-thickness property controls the thickness of the decoration line. It can use values such as auto, from-font, lengths, and percentages.

p {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
}

The from-font value uses information supplied by the font when suitable decoration thickness information is available.

Underline Position

The text-underline-offset property controls the distance between an underline and the text. This can help provide additional space between the characters and the underline.

p {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

The offset changes the position of the underline without changing the position of the text itself.

text-decoration Shorthand

The text-decoration shorthand can combine the line, color, style, and thickness into a single declaration.

p {
  text-decoration: underline steelblue wavy 2px;
}

Values that are not specified use their corresponding initial values. Separate longhand properties can be easier to read when only one part of an existing decoration needs to be changed.

Text Decoration and Links

Browsers normally underline links, making the underline an important visual indication that text is clickable. Removing the underline can make links more difficult to distinguish from surrounding text.

a {
  text-decoration: none;
}

If a link underline is removed, another clear visual treatment should distinguish links from regular text. Link states such as hover and focus should also remain easy to recognize.

Text Decoration Example

The following example uses the text-decoration shorthand to create a steel blue wavy underline. Open the example in the editor and change the values. Try overline, line-through, another color, double, dotted, dashed, or a different thickness, then run the code to compare the results.

p {
  text-decoration: underline steelblue wavy 2px;
}