한 줄 요약 - 링크에 마우스를 올리면 밑줄이 슬라이드되거나 가운데서 펼쳐지거나 물결치며 나타나는 효과 6종을, JavaScript 한 줄 없이 순수 CSS로 만든 모음입니다.
이럴 때 필요해요
링크의 기본 밑줄은 켜져 있거나 꺼져 있을 뿐 부드럽게 나타나게 만들기가 어렵습니다. "평소엔 깔끔하다가 마우스를 올리면 밑줄이 스르륵 그어지는" 인터랙션을 넣고 싶을 때, 진짜 밑줄 대신 가짜 밑줄(의사요소/그라데이션 배경)을 깔아두고 애니메이션하는 정석 패턴을 한자리에 모았습니다.
어떻게 동작하나
- 글자 아래에 보이지 않는 밑줄을 미리 깔아둡니다(
::after의사요소/background-image). - 평소엔 그 밑줄을 가로 0배(
scaleX(0))/폭 0%/투명색으로 숨겨 둡니다. :hover가 되면 값을 원래대로 되돌리고transition이 그 변화를 부드럽게 이어줍니다.
핵심은 이거예요
"밑줄을 켰다 껐다"가 아니라 "항상 거기 있는 밑줄을 보였다 숨겼다" 하는 발상입니다. 왼쪽부터 펼칠지 가운데서 펼칠지는 transform-origin 한 단어로 결정됩니다.
놓치기 쉬운 것
border-style(점선/실선)은 transition이 먹지 않아 즉시 바뀝니다. 색/두께만 부드럽게 전환됩니다.text-decoration: underline은 애니메이션이 거의 안 되므로 가짜 밑줄을 따로 그리는 편이 자유롭습니다.- 두 겹 밑줄을 위아래로 빼는 "교체" 효과는 부모에
overflow: hidden이 필요합니다. - 모션을 줄이고 싶은 사용자를 위해
prefers-reduced-motion폴백을 넣었습니다.
이런 곳에 써요
- 네비게이션 메뉴/푸터 링크처럼 hover 피드백이 필요한 모든 텍스트 링크
- 블로그 본문 인라인 링크, 랜딩 페이지 CTA 옆 텍스트 버튼