CSS underline text on hover with animation

Hi 👋 fellow coders. In this tutorial, we will learn to add an underline hover effect in CSS. This is a simple CSS hover effect with a gradient background. A hover effect can be used to indicate something important or a link.

Also, Read- CSS Scroll Animation

How to add an underline hover effect in CSS?

To create an underline hover effect we need to create an underline for our text. This is not a normal underline it is a gradient underline, and then we will animate.

If you think this is a hard task then let me tell you it is a piece of cake.

Text linear-gradient background with CSS Codepen

To add a linear gradient background to the text we can use the background (or background-image) property and create a gradient using the CSS linear-gradient() function.

Property	Description
CSS background property	The background property defines the background of an HTML element
CSS linear-gradient function	The CSS linear-gradient() function creates a gradient background image using the given values

Note: You can learn more about CSS background properties in our CSS Backgrounds | CSS- Beginner to Advance lesson.

Below we add a background image to our text

.gradient-underline {
  background-image: linear-gradient(90deg, blue, purple, #f3bc26);
}

The above code creates a background gradient image with 3 colors at a 90-degree angle.

Text gradient underline with CSS Codepen

See the Pen Text gradient underline by Rare Programmer (@rareprogrammer) on CodePen.

Moving on we need to set background-repeat to no-repeat and background height to 3 pixels with its position at the bottom left.

.gradient-underline {
  text-decoration: none; /* don't forget to remove the text decoration from links */
  background-image: linear-gradient(90deg, blue, purple, #f3bc26);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: bottom left;
}

In the above code, we removed the text-decoration just in case the text is a link.

CSS underline animation left to right Codepen

See the Pen Underline animation left to right by Rare Programmer (@rareprogrammer) on CodePen.

Now, we need to set the background width to 0 and make it 100% when the user does a mouse over. For that, we set the initial background width to 0%

background-size – defines the size of the background image

.gradient-underline {
  ...
  background-size: 0% 3px; /* Here, the initial background width is 0% */
  ...
}

Next, we need to set the background width to 100% on the mouse over, We will use the CSS ::hover pseudo-class.

The CSS ::hover pseudo-class is used to select an HTML element when a user mouse over

.gradient-underline:hover {
  background-size: 100% 3px;
}

Make it smooth

But, the effect is not smooth. We can use the CSS transition property on the background-size property to do that.

The CSS transition property allows us to change the property values smoothly over a given time.

.gradient-underline {
  ...
  transition: background-size 300ms;
}

The 300 milliseconds transition time is enough for this effect.

Our effect is complete, try to mouse over on the text.

The full source code is available on Github.

With that, this tutorial ends here.

If you find this tutorial helpful then please share it with your friends.