How to Create an Expanding Border on Hover with CSS?

Expanding Border on Hover with CSS

You desire a border that expands when the mouse hovers over it. Here's an alternative approach to achieve this effect:

Using the CSS transform property, particularly transform:scaleX(), allows you to scale the border element.

h1 {
  display: inline-block;
}

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

h1:hover:after {
  transform: scaleX(1);
}

In this approach, we apply the transform and transition properties to a pseudo-element (::after) to avoid affecting the text content and add the necessary markup.

To expand the border from the left or right, adjust the transform-origin property accordingly:

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

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

By customizing the transform-origin, you can control the direction of the border expansion.

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