Hey fellow creators,
Let's learn how to create an easy but impactful underline animation in CSS so that your links look cooler!
If you prefer to watch the video version, it's right here :
1. The HTML Structure.
You only need to add a title to your body.
<body>
<h1>Animation</h1>
</body>
2. Style the title.
Start by choosing whichever font you want for your body. I'll use Arial here.
body {
font-family: Arial, Helvetica, sans-serif;
}
Then, center the title in the middle of the page and style it a bit.
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
cursor: pointer;
}
3. Time to animate it!
The animation will run with the pseudo-element after.
h1::after{
content: "";
display: block;
position: absolute;
width: 100%;
height: 3px;
background: #000;
transition: transform 0.2s ease-in-out;
transform: scale(0);
}
To trigger the animation, you need to hover over the title. So, once you do (with "h1:hover"), the animation will happen ("::after"), like so:
h1:hover::after{
transform: scale(1);
}
(You can also replace "scale" with "scaleX", but it will only provoke a minor difference.)
You're done. And yes, it's that easy!
This is a nice animation to use on links for instance, because it will allow users to understand that it's a link.
Check out my Youtube channel: https://www.youtube.com/c/TheWebSchool
Enzo.
Top comments (3)
such a valuable information Ustariz ! Appreciate it !
You don't need to add display:inline to the h1 since it has position:absolute
Wops, exact indeed, I'll change that.
Some comments have been hidden by the post's author - find out more