The complete guide to underlines (CSS)

Everything, everything... You will know everything about underline bars! Well, okay, did you at least recognize the music? Anyway, underline bars are not just limited to underlining our texts from time to time; they are a true styling tool that allows us to add lines below, but also above, in wavy forms, dotted, dashed... As you may have guessed, we will cover all of this in this article.

The Multi-Faceted Property

The text-decoration property is the property that has allowed us so far to underline text. You know, with the underline value? Well. But it's not really the only possible value with this property; there are many others. We are actually talking about a property that allows us to decorate the text and not just underline it.

Another important point: text-decoration is a shorthand property! You may be used to using it, but it actually combines:

1. text-decoration-line - It allows you to define the position of the lines (who said we could only underline?);
2. text-decoration-color - This allows you to change the color of the line;
3. text-decoration-style - With the aim of defining the style of the line.

Text-decoration-line

The text-decoration-line property, as we have just seen, allows you to define the position of the lines. And it might be the most important thing you will learn in this article (although... at the end, we have a nice surprise for you).

Here are the possible values for text-decoration-line:

• none - To display no decoration line;
• underline - To display a decoration line below (to underline);
• overline - To display a decoration line above;
• line-through - To display a decoration line through the middle (to strike through).

So? What do you think? We are used to the first two values none and underline, but when it comes to striking through text (line-through) or placing a line above it (overline), it's another story.

And what you might not have known? We can combine these values. For example with:

text-decoration-line: underline overline;

We display a line below (underline) but also above (overline).

Pretty nice, right? And of course, you can continue by also specifying line-through to have a line above, through, and below.

Text-decoration-color

For the text-decoration-color property, we can go faster: it simply allows you to change the color of the lines decorating the text.

text-decoration-color: #613BDB;

This will allow us to set the lines in purple (Believemy's color).

Text-decoration-style

And to finish, the text-decoration-style property will allow us to change the style of the line. For now, it's a bit... linear.

Here are the values we can use with text-decoration-style:

• double - Displays double lines;
• solid - Displays a solid line;
• dotted - Displays dotted lines;
• dashed - Displays dashed lines;
• wavy - Displays wavy lines.

Alright, an example for the road to see what wavy looks like:

text-decoration-line: underline overline;
text-decoration-color: #613BDB;
text-decoration-style: wavy;

Obviously, we have taste.

Text-decoration

All these properties are very interesting when used together, resulting in well-decorated elements with a quite original style. But all these properties are lengthy to add... Fortunately, as we saw together, we can use text-decoration to dominate them all at once.

The functionality of the text-decoration property is represented here:

text-decoration: <text-decoration-line> <text-decoration-style> <text-decoration-color>

If we want to reproduce the previous example, we will have:

text-decoration: underline overline wavy #613bdb;

Now you know everything about text-decoration and the properties it uses: text-decoration-line / text-decoration-style / text-decoration-color. If you want to learn more about HTML and CSS, we have a complete training dedicated to these two programming languages. Also, feel free to share this article with your friends on your social networks. Thank you!