단순한 밑줄(text-decoration: underline)을 넘어, 마우스를 올렸을 때 중앙이나 한쪽 끝에서부터 스르륵 자라나는 세련된 밑줄 애니메이션입니다. 가상 요소(::after)의 넓이를 설정하고 처음에 transform: scaleX(0)으로 숨겼다가, 호버 시 scaleX(1)로 부드럽게 나타나도록 구현합니다.

<div class="underline-wrapper">
  <a href="#" class="hover-underline">멋진 애니메이션 링크</a>
</div>