By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Text-decoration Property

How to use the Text-decoration Property of CSS.

Edited: 2016-01-09 06:16

The CSS Text-decoration property is used to decorate text, styling it with underline, underline, blink or line-trough.

A common practice is to remove the default underline on a elements.

The use of this property might affect the readability of text, so be careful how you use it.

StyleSheet code:

a {
  text-decoration: line-through;
}

Inline CSS:

<p style="text-decoration:line-through;">Example text.</p>

Possible Values

  • none (Default)
  • underline
  • overline
  • line-through
  • blink

Inherited? - NO!

Remove the underline from links

A common use of the text-decoration property is to remove the underline from links, since browsers tend to render them with an underline by default.

a {
  text-decoration: none;
}

Create a line-trough span

You can create a line-trough span for deleted text, though it is generally bad to apply line-through on text since it can make the text harder to read.

The CSS:

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

The HTML:

<p style="text-decoration: line-through;">The <span class="deleted"> property is still for sale</span>, but the ground is polluted with chemicals.</p>