text-decoration

Anonymous contributor's avatar
Anonymous contributor
Published Jun 30, 2021Updated Nov 16, 2024
Contribute to Docs

The text-decoration CSS property adds a line beneath, over, or through the text. To reset it, the property can be set to none.

The line can also be styled as wavy, dotted, or in a custom colour.

Syntax

text-decoration: <text-decoration-value>;

The text-decoration-value can be the following:

  • none
  • underline
  • overline
  • line-through

Examples

Paragraph with an underline

p {
  text-decoration: underline;
}


<p>Example Paragraph</p>

text decoration underline

Paragraph with an overline

p {
  text-decoration: overline;
}


<p>Example Paragraph</p>

text decoration overline

Paragraph with a line through

p {
  text-decoration: line-through;
}


<p>Example Paragraph</p>

text decoration line through

Paragraph with a wavy red underline

p {
  text-decoration: red wavy underline;
}


<p>Example Paragraph</p>

text decoration red wavy underline

All contributors

Contribute to Docs

Learn CSS on Codecademy