Text Decoration

CSS Text Decoration

CSS text decoration properties control decorative lines added to text. They can create underlines, overlines, and line-throughs, as well as control the color, style, and thickness of those lines.

The text-decoration Property

The CSS text-decoration property is a shorthand property for specifying decorative lines on text. A simple use is adding an underline.

p {
  text-decoration: underline;
}

The shorthand can also specify other characteristics of the decoration, including its style, color, and thickness.

Text Decoration Line

The text-decoration-line property specifies which decorative line is displayed. Common values include underline, overline, line-through, and none.

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

The none value specifies that no text decoration line should be drawn.

Text Decoration Style

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

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

A decoration style has a visible effect when a decoration line has also been specified.

Text Decoration Color

The text-decoration-color property controls the color of the decoration without changing the color of the text itself.

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

Text 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 auto value lets the browser choose an appropriate thickness, while from-font uses thickness information supplied by the font when that information is available.

Text Decoration Shorthand

The text-decoration shorthand can combine the decoration line, color, style, and thickness in one declaration.

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

This example creates a blue, wavy underline with a thickness of 2 pixels.

You do not need to specify every component. For example, text-decoration: underline; is sufficient when the default style, color, and thickness are acceptable.

Try Different Text Decorations

Edit the text decoration properties in the example to compare different lines, styles, colors, and thicknesses.

Text Decoration and Links

Browsers normally underline links, helping visitors recognize that the text is clickable. CSS can change this decoration, but links should remain visually distinguishable from surrounding text.

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

This removes the underline from links in their normal state and restores it when the pointer is over the link. If an underline is removed, another clear visual treatment should identify the text as a link.

When styling link states, keep the usual order :link, :visited, :hover, and :active when rules for those states could otherwise conflict.

Decoration Does Not Add Meaning

Text decoration changes presentation; it does not add semantic meaning to the content. For example, applying line-through makes text appear crossed out, but it does not indicate why the content is no longer accurate or relevant.

When the meaning of the content matters, use the appropriate HTML element and CSS for its appearance. For example, the <del> element represents content that has been deleted from a document.

Summary

CSS text decoration properties add and style decorative lines on text. text-decoration-line selects the line, while text-decoration-style, text-decoration-color, and text-decoration-thickness control its appearance. The text-decoration shorthand can combine these values in a single declaration.

The next tutorial covers Text Transform and how CSS changes the capitalization used to display text.