How to underline text using multiple methods in CSS?

In this blog, I will demonstrate various methods to underline text. I know many of you face difficulties achieving your desired style. I also encountered problems with underlining text and will share how I solved them, along with tips and tricks for creating multiline underlined text.

To underline text with CSS, use the text-decoration property set to underline

p {
  text-decoration: underline;
}

You can also create an underline using pseudo-element selectors like ::after and ::before.

<p class="text-underlined">This text will be underlined.</p>
<style>
.text-underlined {
  position: relative;
  display: inline-block;
}

.text-underlined::after {
  content: '';
  position: absolute;
  border-bottom: 2px solid red;
  bottom: -2px;
  left: 0;
  width: 100%;
}
</style>

Underline text for multiple lines and animate the underline.

I want an underline for each line of text. I know I can achieve this with text-decoration: underline, but the text-decoration property doesn't support animation. I need to animate the underline without changing the text. When I hover over the text, the underline should animate (length should be increase).

I spent two days researching and trying various methods, experimenting with block-level elements like div and p. I later realized that underlining multiline text with block-level elements is only achievable with the text-decoration property. Other methods work only for inline elements. In this post, I will explain how I achieved underline animation. 

Here is the demo of the text I created.  

Hover over this text to see the animation.
Your text here that may span multiple lines and needs an extended underline effect.

To achieve this style without using the text-decoration property, you should make your element an inline element.

Method 1: Using border-bottom property

<p class="underline-extended">Hover over this text to see the animation. <br /> Your text here that may span multiple lines and needs an extended underline effect.</p>
<style>
.underline-extended {
  border-bottom: 2px solid black;
  display: inline;
  transition: all 0.3s;
  cursor: pointer;
}
.underline-extended:hover {
  border-color: red;
  padding-right: 20px;
}
</style>

Method 1: Using background-image property

<p class="underline-extended">Your text here that may span multiple lines and needs an extended underline effect. <br>You can hover this text and you will see the animation</p>
<style>
.underline-extended {
  background-image: linear-gradient(90deg, black,black);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  display: inline;
  transition: all 0.3s;
  cursor: pointer;
}
.underline-extended:hover {
  background-image: linear-gradient(90deg, red,red);
  padding-right: 20px;
}
</style>

I hope you found this helpful. If anyone achieves this effect using block-level elements, please let me know by email—I’d be interested to hear about it.

Thank You!