CSS Only
Hover Underline 갤러리
링크에 마우스를 올려보세요. 모두 JavaScript 없이 순수 CSS로 만든 6가지 밑줄 효과입니다.
왼쪽에서 오른쪽으로
scaleX + transform-origin: left
밑줄을 가로로 0배 줄여놨다가 hover 시 1배로 펼침
가운데에서 양쪽으로
scaleX + transform-origin: center
기준점을 가운데로 두면 양쪽으로 동시에 펼쳐짐
위로 미끄러지며 교체
2겹 밑줄 + translateY + overflow:hidden
현재 밑줄은 위로 빠지고 새 밑줄이 아래에서 올라옴
그라데이션이 차오름
background-image + background-size 0%→100%
linear-gradient 밑줄의 폭만 0%→100%로 늘림
점선에서 실선으로
border-bottom-style: dashed → solid
border-style은 즉시 바뀌고 색·두께만 부드럽게 전환
물결치는 밑줄
text-decoration: wavy + 색 transition
물결 밑줄을 평소엔 투명, hover 시 색을 입힘