Text-decoration-line in CSS

What is a text decoration line?

Simply, text decoration means decorating or styling a text using CSS. Such as the CSS text-decoration-line property is used to decorate or create a text line. A text has three types of lines, they are underline, overline, and line-through. The underline is placed under the text, the overline is placed over or above a text and the line-through is placed middle of the text. The text-decoration-line property values are underline, overline, and line-through. We can use three values at the same time separated by space.

How to use text-decoration line property

CSS:

.p1{
text-decoration-line: underline;
}
.p2{
text-decoration-line: line-through;
}
.p3{
text-decoration-line: overline;
}
.p4{
text-decoration-line: overline line-through underline;
}

HTML:

<p class="p1">THIS IS PARAGRAPH TEXT 1</p>
<p class="p2">THIS IS PARAGRAPH TEXT 2</p>
<p class="p3">THIS IS PARAGRAPH TEXT 3</p>
<p class="p4">THIS IS PARAGRAPH TEXT 4</p>

Output:

In the above code, we have four <p> tags with separate class names. We have used text decoration line property for all paragraph tags but given different values. The first <p> tag have underline value, the second <p> tag have line-through value, the third <p> tag have overline value, and the last <p> tag have all three values. So, see the given output the fourth paragraph text has all three lines.