Smooth link underlining on hover with pure CSS

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

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.

Was the article helpful?
👍
Yes - 9
👎
Not - 6
💬Comments:
Аноним

Не работает, тег 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;
}

Anonym

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
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 18285
Appearance of elements on scrolling
Views: 16841
How to center an image with CSS
Views: 6955
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 6791
How to make a button click effect in CSS
Views: 6210
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;
}
    
10px
20px
30px
Very Peri
🤔Color of 2022
The Pantone Color Institute has announced the color of the year 2022. It's a shade of lilac lilac shade called 17-3938 Very Peri.
#6667ab