• Post category:CSS

How to Change the CSS Underline Style

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:

css underline style

  1. In the above code, we have written the HTML general syntax.
  2. Then in the body section, we created three <p> tags with different classname.
  3. 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”.
  4. See the above output, the p1 class has underlined text, the p2 class has line-through text, and the p3 class has overline text.

Leave a Reply