Efecto de desplazamiento: expansión animada del borde inferior

En esta pregunta, el objetivo es crear un efecto de desplazamiento que extienda el borde inferior de un elemento al pasar el cursor. Para lograr este efecto, podemos utilizar la propiedad de transformación y pasarla de 0 a 1 al pasar el mouse.

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

Este enfoque utiliza un pseudoelemento para separar la transición del borde del texto, preservando la estructura HTML original. La propiedad transform-origin se puede manipular para expandir el borde desde diferentes direcciones, como se ilustra a continuación:

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

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