How to Create an Animated Expansion of Border Bottom on Hover?

Hover Effect: Animated Expansion of Border Bottom

In this question, the goal is to create a hover effect that extends the bottom border of an element upon hovering. To achieve this effect, we can utilize the transform property and transition it from 0 to 1 on hover.

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

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);
}

This approach uses a pseudo-element to separate the border transition from the text, preserving the original HTML structure. The transform-origin property can be manipulated to expand the border from different directions, as illustrated below:

<h1>

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

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

The above is the detailed content of How to Create an Animated Expansion of Border Bottom on Hover?. For more information, please follow other related articles on the PHP Chinese website!