How Can I Create a Left-to-Right Animating Underline with CSS and Reverse it on Hover?

Animating Underlines: From Left to Right

The challenge of replicating the transition effect from uber.design lies in reversing the transition on hover. While the CSS provided can animate the underline from left to right, it lacks the ability to reverse the animation.

To achieve the desired effect, we can leverage a combination of gradient and background positioning. By applying a linear gradient to the element and adjusting the background-position with a delay, we can create the illusion of the underline expanding from left to right.

Here's the revised CSS:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

This code creates a linear gradient on the element, initially positioned at the bottom left (0% 100%). On hover, the background-position changes to the bottom right (100% 100%), causing the gradient to expand the width of the element, creating the effect of an underline moving from left to right.

To fine-tune the animation, adjust the values for background-size and transition duration to suit your desired effect.

The above is the detailed content of How Can I Create a Left-to-Right Animating Underline with CSS and Reverse it on Hover?. For more information, please follow other related articles on the PHP Chinese website!