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>
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>
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.
CSS wavy underline example
<style>
span {
text-decoration: underline;
text-decoration-style: wavy;
}
</style>
<p><span>Hi John,</span> nice to meet you.</p>
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>
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 –
Add multiple lines to a text at once
<style>
p {
text-decoration-line: underline overline line-through;
}
</style>
<p><span>Hello World!</span></p>
Use the text-decoration: property to write less CSS code
<style>
p {
text-decoration: underline wavy red;
}
</style>
<p><span>Hello World!</span></p>
<style>
p {
text-decoration: underline solid red 10px;
}
</style>
<p><span>Hello World!</span></p>
<style>
p {
text-decoration: underline overline line-through solid red 2px;
}
</style>
<p><span>Hello World!</span></p>
