How to underline a text using CSS?

In this tutorial, we will see how to underline a text using CSS. We’ll also see how to add different types of lines, as well as how to color them.

Add a simple underline to a text using CSS

CSS has a property called text-decoration: which can take different values but to add a simple underline just add underline as a value.

text-decoration: underline;
<style>
    span {
        text-decoration: underline;
    }
</style>

<p><span>Hello World!</span> How are you?</p>
result of CSS simple underline a text

Add color to underline in CSS

The CSS text-decoration-color: property is used to add color to the underline.

<style>
    span {
        text-decoration: underline;
        text-decoration-color: blue;
    }
</style>

<p><span>Hello World!</span> How are you?</p>
Result of CSS text underline color

Various styles of underlines

In CSS, there are various styles of underlines that you can add to a text like – solid, dashed, dotted, double, wavy.

The text-decoration-style: property is used to add those underline styles.

Various styles of underlines

CSS wavy underline example

<style>
    span {
        text-decoration: underline;
        text-decoration-style: wavy;
    }
</style>

<p><span>Hi John,</span> nice to meet you.</p>
CSS Wavy underline example

Change the thickness of the underline using CSS

The text-decoration-thickness: property is used to add thickness to an underline.

<style>
    span {
        text-decoration: underline;
        text-decoration-thickness: 10px;        
    }
</style>

<p><span>Hi World,</span> how are you?</p>
CSS Underline Thickness

Various types of text decoration lines

There are various types of text-decoration lines that you can add to a text. See the following image –

Various types of text decoration lines

Add multiple lines to a text at once

<style>
    p {
        text-decoration-line: underline overline line-through;
    }
</style>

<p><span>Hello World!</span></p>
text-decoration multiple lines

Use the text-decoration: property to write less CSS code

<style>
    p {
        text-decoration: underline wavy red;
    }
</style>

<p><span>Hello World!</span></p>
CSS text decoration example 1
<style>
    p {
        text-decoration: underline solid red 10px;
    }
</style>

<p><span>Hello World!</span></p>
CSS text decoration example 2
<style>
    p {
        text-decoration: underline overline line-through solid red 2px;
    }
</style>

<p><span>Hello World!</span></p>
CSS text decoration example 3