Effet de survol : extension animée de la bordure inférieure

Dans cette question, l'objectif est de créer un effet de survol qui étend la bordure inférieure d'un élément lors du survol. Pour obtenir cet effet, nous pouvons utiliser la propriété transform et la faire passer de 0 à 1 en survol.

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

Cette approche utilise un pseudo-élément pour séparer la transition de bordure du texte, préservant ainsi la structure HTML d'origine. La propriété transform-origin peut être manipulée pour étendre la bordure dans différentes directions, comme illustré ci-dessous :

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

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