Create hover underline animation in TailwindCSS

Last updated: Nov 10, 2023 - by: C. Smith

If you want to improve the aesthetics of your website a little but don't want to use grandiose effects, a simple underline animation can be a good solution.
It's not intrusive, but still a bit more than the default functionality, which helps to brighten up the design. It looks like this:

Underline animation on hover

Concept

The implementation isn't too complicated either. The concept is to place an absolute positioned div tag inside the element. This div tag will give the underline. We will resize the with of this div element during the animation.

Implementation

Let's look at a concrete example. Create a menu component with three menu items:

<div class="flex p-4 bg-slate-100">
    <a class="p-2 px-4" href="#"> Home </a>
    <a class="p-2 px-4" href="#"> Products </a>
    <a class="p-2 px-4" href="#"> Resources </a>
</div>

Basic menu

Add the previously mentioned div elements to each menu item as the next step. We can control the thickness of the line by adjusting the height of the div, and we can increase the distance from the text by adjusting the top margin.

<div class="flex p-4 bg-slate-100">
    <a class="p-2 px-4" href="#">
        Home
        <div class="bg-amber-500 h-[2px]"></div>
    </a>
    <a class="p-2 px-4" href="#">
        Products
        <div class="bg-amber-500 h-[2px]"></div>
    </a>
    <a class="p-2 px-4" href="#">
        Resources
        <div class="bg-amber-500 h-[2px]"></div>
    </a>
</div>

Menu items with underline

Set the width of the div element to 0 using the w-0 class, to hide it by default. The hover event should cause the width to be set to full width using the w-full class.

The question is how can we change the width value?

We can not use the hover pseudo property of the div element as we want the animation if the user mouse is over the parent element. To solve this problem, we can use the group utility class in TailwindCSS. On the parent element, we put the group class, and then on the div element, we monitor the group hover event. So instead of using hover:w-full notation, we use group-hover:w-full .

<div class="flex p-4 bg-slate-100">
    <a class="p-2 px-4 group" href="#">
        Home
        <div class="bg-amber-500 h-[2px] w-0 group-hover:w-full"></div>
    </a>
    <a class="p-2 px-4 group" href="#">
        Products
        <div class="bg-amber-500 h-[2px] w-0 group-hover:w-full"></div>
    </a>
    <a class="p-2 px-4 group" href="#">
        Resources
        <div class="bg-amber-500 h-[2px] w-0 group-hover:w-full"></div>
    </a>
</div>

At this point, we have a simple hover effect without animation, that is similar to what you get by default with a link element. However, from here we can set the animation classes transition-all and duration, for example duration-500 to get the final result:

<div class="flex p-4 bg-slate-100">
    <a class="p-2 px-4 group" href="#">
        Home
        <div class="bg-amber-500 h-[2px] w-0 group-hover:w-full transition-all duration-500"></div>
    </a>
    <a class="p-2 px-4 group" href="#">
        Products
        <div class="bg-amber-500 h-[2px] w-0 group-hover:w-full transition-all duration-500"></div>
    </a>
    <a class="p-2 px-4 group" href="#">
        Resources
        <div class="bg-amber-500 h-[2px] w-0 group-hover:w-full transition-all duration-500"></div>
    </a>
</div>

Hover underline animation

Resources

TailwindCSS group reference

TailwindCSS transition reference