CSS Text Decoration allows us to bring attention to important content on our website by creating underlines. We're going to take a look at how this happens and ways we can customise it.

Youtube: CSS Text Decoration

You would have seen it's most common use is applied every day by default in A tags that have a link, these are visible by an underline. While the link may also turn blue, the use of a CSS text-decoration provides greater accessibility for those people who might be colourblind to understand the item is clickable.

There are a few different ways to use text decorations so in this video we will go through their default behaviour, as well as different designs and uses we can apply them to, such as striking out text, changing the style of their underline and providing hover effects.

Let's start with the basics, which is the actual CSS property, text-decoration. This can apply with value such as underline. By doing so, we have a single line under our text block that is the same colour as the font. Be careful how you use this though, as it could be confused as a hyperlink.

An example of text-decoration in practice for this tutorial.

An example of <span>text-decoration in practice</span> for this tutorial.

span { text-decoration:underline; }

This is actually applied by default any time we place an <a> tag in our html code. But sometimes we might have to also remove this default behaviour, and only apply it on hover.

<a href="#">Example Link</a>

a { text-decoration:none; }
a:hover { text-decoration:underline; }