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

Expand Bottom Border on Hover

In this question, the objective is to create a hover effect where the bottom border expands when the cursor hovers over the element. The provided code snippet uses a pseudo element with an opacity transition to reveal the border on hover.

Solution:

To achieve the desired effect, we can use CSS transform: scaleX() to expand the border rather than the opacity. Here's how it works:

1. Create a pseudo element with a bottom border:

   h1:after {
     position: absolute;
     left: 0;
     content: '';
     height: 40px;
     width: 275px;
     border-bottom: solid 3px #019fb6;
   }

   Copy after login

2. Apply a scaleX() transform with a transition:

   h1:after {
     ...
     transform: scaleX(0);
     transition: transform 250ms ease-in-out;
   }

   Copy after login

3. Expand the border on hover by setting scaleX to 1:

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

   Copy after login

Modification for Expansion Direction:

Additionally, we can control the direction of the border expansion by adjusting the transform-origin property of the pseudo element:

1. To expand from the center:

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

   Copy after login

2. To expand from the right:

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

   Copy after login

3. To expand from the left:

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

   Copy after login

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