Smooth link underlining on hover with pure CSS

🗓️ Updated: 08.08.2022
💬Comments: 2
👁️Views: 10722

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:


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.

Was the article helpful?
Yes - 26
Not - 7

Не работает, тег hover:before ничего не происходит:
.About {
text-decoration: none !important;
font-size: 30px;
font-family: “Lato”;
color: rgb(57, 57, 57);
font-weight: bold;
line-height: 1.2;
text-align: left;
position: absolute;
left: 830.906px;
top: 52px;
z-index: 8;
.About::before {
content: ”;
position: absolute;
left: 0; bottom: -5px;
width: 0%;
height: 2.5px;
background-color: #575757;
.About:hover:before {
width 100%!important;


vse, razobrlaysa tam ne bilo : v width v konce

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆The best website hosting
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 56414
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 42572
Appearance of elements on scrolling
Views: 41858
How to center an image with CSS
Views: 25882
How to make a button click effect in CSS
Views: 19448
Check of knowledge
🤔How well do you know CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
Viva Magenta
🤔Color of 2023
The Pantone Research Institute has chosen the color of the year for 2023. They became a carmine-red shade with a purple undertone, which was called Viva Magenta.