Underline text in CSS

In the first versions of HTML the element appeared
u
which allowed us to underline text on the web in a very simple way. But in later versions of the HTML said tag has become obsolete, and is now used to underline text using CSS. In this article we are going to see how we can underline text in CSS.

Be careful, the element
u
has become obsolete does not mean that it will not work in our browsers, since backward compatibility is assured. It is simply not highly recommended to use it. And it is better to do it with CSS.

To be able to underline text on the web with CSS the first thing we will have to do is create a class. We will later assign this class to the part or parts of our page that we want to highlight. In this case we have created the class underline. It’s not that we have been very original. 😀

<style>
 .underline{...}
<style>

The next thing we need to know is that the attribute that allows us to customize the text is
text-decoration
. The syntax of
text-decoration
is the following:

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

In this case the value assigned to text-decoration-line to the underline is «underline». In this way our class CSS would look like this:

.underline{
  text-decoration:underline;
}

Now we will only have to apply the style CSS to a part of our website. To do this we must use the class attribute of some HTML. In our case we will do it through the online block
span
.

Let’s see how the line of code would look:

<span class="underline">CSS underlined text</span>

I hope you liked it and above all that this example on how to underline text in CSS is useful to you.