What is the CSS text-decoration Property?

What is the CSS text-decoration Property?

Introduction

In short, the text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

The text-decoration property specifies how the text will be decorated. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the more recent text-decoration-thickness property.

Syntax

h2 {
  text-decoration: underline;
}

Values

Commonly used values are:
none – The default value, this defines a normal text. No line is drawn, and any existing decoration is removed.
inherit – Inherits this property from its parent element
overline – Draws a 1px horizontal line above the text
underline – Draws a 1px horizontal line below the text
line-through – draws a horizontal line through the text
blink – As you may guess by the name, this makes the text blink. The blink value is in the W3C spec, but it is deprecated and will not work in any current browser.

Demo

The example below demonstrates the difference between each value.

<p class="none">This is default style of the text (none).</p>
<p class="inherit">This text inherits the decoration of the parent.</p>
<p class="overline">This is overlined text.</p>
<p class="underline">This is underlined text.</p>
<p class="line-through">This is lined-through text.</p>
<p class="blink">
  This text might blink for you, depending on the browser you use.
</p>

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

You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines.

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

Conclusion

In this article we learnt that the text-decoration property specifies the decoration added to text, and is a shorthand property for: text-decoration-line (required) text-decoration-color. text-decoration-style. text-decoration-thickness.

Further reading

Want to learn a bit more about text-decoration and its browser compatibility? Then check out – text-decoration | MDN

See also

How do you use Cascading Style Sheets (CSS)?
What are CSS Rules and Selectors?

If you liked this article, then please share. You can also find me on Twitter for more updates.