Hover-Effekt: Animierte Erweiterung des unteren Rands

In dieser Frage besteht das Ziel darin, einen Hover-Effekt zu erzeugen, der den unteren Rand eines Elements beim Schweben erweitert. Um diesen Effekt zu erzielen, können wir die Transformationseigenschaft nutzen und sie beim Hover von 0 auf 1 ändern.

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

Dieser Ansatz verwendet ein Pseudoelement, um den Randübergang vom Text zu trennen und dabei die ursprüngliche HTML-Struktur beizubehalten. Die transform-origin-Eigenschaft kann manipuliert werden, um den Rahmen aus verschiedenen Richtungen zu erweitern, wie unten dargestellt:

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

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