Smooth link underlining on hover with pure CSS

In this article, I’ll tell you how you can make a smooth link underlining on hover. This will be implemented with CSS, without using third-party libraries.

Let’s say you have a link:

<a href="#">How to make a smooth underline</a>

It’s just a normal link that is styled by the browser by default. Let’s fix that.

Our plan is to use the :before pseudo element to create a line just below the link. And that’s the line we’re going to manipulate in the future.

Let’s add these styles:

a {
	position: relative;
	color: #484848;
	font-size: 1.25rem;
	text-decoration: none;
}
a::before {
	content: '';
	position: absolute;
	left: 0; bottom: -5px;
	width: 100%;
	height: 1.5px;
	background-color: red;
}

You should have a red line below the link. This is our :before pseudo element.

Let’s change the width of this line. Instead of 100%, we set it to 0 – that is, it will now not be visible.

And then when the user hovers over the link, we will change the width property of our pseudo element. Let’s spell it out:

a:hover:before {
	width: 100%;
}

So, when you hover over the link, our line appears. Let’s set the smoothness – specify which property we will change and specify the transition time.

a::before {
	transition: width 0.35s;
}

Here we have specified that the transition of the width state from zero to 100% will take 0.35 seconds.

So, the final code looks like this:

DEMO

I showed you the principle by which you can create a smooth underline. You can experiment and change the values. Or change the properties. For example, instead of changing width from 0 to 100%, put width: 100%, but set transform: scaleX(0) for example, and change it to scaleX(1) when hovering. Try it!

We have a video about this topic on our youtube channel, we advise you to watch it if you still have questions.