✨ 호버 언더라인 모션 (Animated Underline)

단순하고 딱딱한 기본 밑줄(text-decoration: underline)을 넘어, 마우스를 올렸을 때 중앙이나 한쪽 끝에서부터 스르륵 자라나는 세련된 밑줄 애니메이션입니다.

원리는 아주 간단합니다! 가상 요소(::after)를 글자 아래에 만들고, 처음에 transform: scaleX(0)으로 너비를 0으로 숨겨둡니다. 그리고 마우스를 올릴(hover) 때 scaleX(1)로 바꿔주면 transition을 타고 부드럽게 밑줄이 자라나게 됩니다.