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>