호버 효과: 테두리 하단의 애니메이션 확장

이 질문의 목표는 호버링 시 요소의 아래쪽 테두리를 확장하는 호버 효과를 만드는 것입니다. 이 효과를 얻으려면 변환 속성을 활용하고 마우스를 올리면 0에서 1로 전환할 수 있습니다.

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

이 접근 방식은 의사 요소를 사용하여 텍스트에서 테두리 전환을 분리하고 원본 HTML 구조를 유지합니다. 아래 그림과 같이 변환 원본 속성을 조작하여 다양한 방향에서 테두리를 확장할 수 있습니다.

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

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