How to Create an Expanding Bottom Border Hover Effect with CSS?

Hover Effect: Expanding Bottom Border on Hover

In the pursuit of creating a visually engaging website, you may encounter the need to add interactive hover effects to your elements. One particular effect that can enhance your design is expanding the bottom border on hover.

To achieve this effect, you can utilize CSS's transform:scaleX() property. By transitioning the scaleX property from 0 to 1 on hover, you can create the illusion of expanding the bottom border.

Here's a code example to expand the bottom border from the center:

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

However, if you wish to expand the border from the left or right, you can modify the transform-origin property as follows:

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

This code creates a pseudo element to apply the border and transition, preventing the text itself from transitioning and maintaining the semantic structure of your HTML.

By implementing these techniques, you can add a dynamic and visually appealing hover effect to your borders, enhancing the user experience and making your website stand out.

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