How to Create Border Bottom Hover Effect in CSS

Welcome to this tutorial, where we’ll explore the power of CSS to create dynamic user interactions. Specifically, we’ll focus on creating an animated border bottom effect on hover using CSS. This effect can enhance the visual feedback of elements like buttons or links, improving your website’s overall user experience.

We will use the ::after pseudo-element and the hover pseudo-class to create a border-bottom hover effect in CSS. In this post, we will also guide you step by step on how to create different types of border bottom hover effects.

Creating the Html Code For Border Bottom:

First, I’m creating three h1 tags, each with a different class. I’m applying a different direction hover effect on each tag, which is why I’m using three separate tags. You can use any tag or element where you want to apply this effect.

<h1 class="fromCenter">Expand from center</h1>
<h1 class="fromRight">Expand from right</h1>
<h1 class="fromLeft">Expand from left</h1>

In CSS, I’m starting by styling the h1 elements. I’m setting the color of the text, making the headers inline elements, removing any default margins, and transforming the text to uppercase.

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

Applying the Transition css on Border Bottom

Next, I’m using the ::after pseudo element to create the border effect. I’m creating a new block-level element after each h1. This element is initially invisible (scaleX(0)) and will expand horizontally (transform: scaleX(1)) when the h1 is hovered over. The transition property makes this change gradual, creating an animation effect.

Customizing the Transition Speed

The speed of the hover effect can be customized by adjusting the duration of the transition. In the transition property, the 250ms value determines how long the transition will take. If you want the hover line to appear slower, you can increase this number. Conversely, if you want the hover line to appear faster, you can decrease this number.

h1::after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}
h1:hover::after {
  transform: scaleX(1);
}

Lastly, to control the direction of the expansion, I’m using the transform-origin property. The transform-origin property sets the origin for the transformations. For the .fromRight class, the origin is set to the right side of the element, so the border will expand from right to left. For the .fromLeft class, the origin is set to the left side, so the border will expand from left to right.

h1.fromRight::after {
  transform-origin: 100% 50%;
}

h1.fromLeft::after {
  transform-origin: 0% 50%;
}

Output: