DEV Community

Cover image for Create an underline animation in CSS !
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

Create an underline animation in CSS !

Hey fellow creators,

Let's learn how to create an easy but impactful underline animation in CSS so that your links look cooler!

Image description
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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Inspecter on Chrome

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

(You can also replace "scale" with "scaleX", but it will only provoke a minor difference.)

You're done. And yes, it's that easy!

Image description

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/Learntocreate/videos

Follow me on my social medias:
Instagram : https://www.instagram.com/learn_to_create1
TikTok : https://www.tiktok.com/@learn_to_create
Twitter : https://twitter.com/Learn_To_Create

See you soon for other quick and easy tutorials !

Enzo.

Discussion (3)

Collapse
wpsyed profile image
Syed Saadullah Shah

such a valuable information Ustariz ! Appreciate it !

Collapse
afif profile image
Info Comment hidden by post author - thread only accessible via permalink
Temani Afif

You don't need to add display:inline to the h1 since it has position:absolute

Collapse
ziratsu profile image
Ustariz Enzo Author

Wops, exact indeed, I'll change that.

Some comments have been hidden by the post's author - find out more