CSS Underline Style
In this article, we will see how to change the CSS underline style. We should use the “text-decoration-line” property to
How to change underlined style
<html>
<head>
<style type="text/css">
.p1{
text-decoration-line: underline;
}
.p2{
text-decoration-line: line-through;
}
.p3{
text-decoration-line: overline;
}
</style>
</head>
<body>
<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>
</body>
</html>Expected output:
- In the above code, we have written the HTML general syntax.
- Then in the body section, we created three <p> tags with different classname.
- In CSS, we select the p1 class using the class selector and then set “the text-decoration-line” property to “underline. Then we select the p2 class using the class selector and then set “text-decoration-line” to “line-through. And we select the p3 class and then set “text-decoration-line” to “overline”.
- See the above output, the p1 class has underlined text, the p2 class has line-through text, and the p3 class has overline text.
