Efeito de foco: expansão animada da borda inferior

Nesta questão, o objetivo é criar um efeito de foco que estenda a borda inferior de um elemento ao passar o mouse. Para obter esse efeito, podemos utilizar a propriedade transform e fazer a transição de 0 para 1 ao passar o 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);
}

Essa abordagem usa um pseudoelemento para separar a transição da borda do texto, preservando a estrutura HTML original. A propriedade transform-origin pode ser manipulada para expandir a borda em diferentes direções, conforme ilustrado abaixo:

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

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