Ustariz Enzo
Posted on October 22, 2021
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.
Posted on October 22, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
