How to Animate the Bottom Border on Hover using CSS?

To animate the bottom border of an element on hover, we can use the ::after pseudo-element selector in combination with the transition property.

The ::after pseudo-element selector is used to add additional content after the original content of an element. In our example, we will use it to add a border at the bottom of the element.

Now, we want to animate the bottom border of the element whenever we hover over it. To achieve this we will use the transition property.

To get the preview, hover over the below links:

• Hover over this link
• Hover over this link
• Hey, animate my bottom border

Let’s say we have the following links in our HTML file with a class animated:

<ul>
    <li><a class='animated' href="#">Hover over this link</a></li>
    <li><a class='animated' href="#">Hover over this link</a></li>
    <li><a class='animated' href="#">Hey, animate my bottom border</a></li>
</ul>

Now, we want to animate the bottom border of these links whenever we hover over them.

To achieve that we have to add the following CSS code:

Example:

.animated{
   text-decoration: none;
   display: inline-block;
}
.animated::after{
   content: '';
   display: block;
   width: 0;    /* Hide border initially */
   height: 2px;
   background: red;
   transition: width 0.3s ease;
}
.animated:hover::after{
   width: 100%;  /* Show border on hover */
}

Method 2 – Using transform Property

You can also use the transform property to animate the bottom border of an element.

In this approach, we scale the bottom border from 0 to 100% whenever we hover over the element using the scaleX() function of the transform property.

The main advantage of this method is that you can specify the direction of animation using the transform-origin property. That is, if you set the transform-origin to left, the border will animate from left to right.

Similarly, if you set the transform-origin to right, the border will animate from right to left.

Let’s first animate the bottom border from left to right just like we did it in the above example:

Example:

.animated{
    text-decoration: none;
    display: inline-block;
}
.animated::after{
    content: '';
    display: block;
    transform: scaleX(0);
    border-bottom: 2px solid red;
    background: red;
    transition: transform 0.3s ease;
    transform-origin: left; /* Animate from left to right */
}
.animated:hover::after{
    transform: scaleX(1);
}

If you want to animate the bottom border from right to left, you have to just set the transform-origin to right.

Hover over the below links to get a preview:

• Hover over this link
• Hover over this link
• Hey, animate my bottom border

Here is the CSS code you need:

Example:

.animated{
    text-decoration: none;
    display: inline-block;
}
.animated::after{
    content: '';
    display: block;
    transform: scaleX(0);
    border-bottom: 2px solid red;
    background: red;
    transition: transform 0.3s ease;
    transform-origin: right; /* Animate from right to left */
}
.animated:hover::after{
    transform: scaleX(1);
}

You can also start animating the border from the center by just setting the transform-origin property to center.

Thanks for reading.