CSS hover하면 밑줄이 촤라락 애니메이션

 

CSS hover시 밑줄이 나타나는 애니메이션

 

 

CSS에서 마우스를 글에 갖다 대면 밑줄이 펼쳐지는 애니메이션이 가끔 필요할 때가 있다.

그 중에서 내가 주로 쓰는 Next.js와 TailwindCSS를 기반으로 메모해 둔다.

 

 

1. 밑줄이 좌->우로 그어지는 애니메이션

<a className="relative after:absolute 
after:bottom-0 after:left-0 
after:w-0 after:h-[1px] 
after:bg-black 
after:transition-all after:ease 
hover:after:w-full">아무 글자 1줄</a>

 

핵심: 가상선택자에 width를 0으로 해뒀다가 hover시 width를 100%가 되게

 

 

2. 밑줄이 가운데에서 문 열리듯 좌우 끝을 향해 생기는 애니메이션

<a className="relative 
after:absolute after:bottom-0 after:left-0 
after:w-full after:h-[1px] 
after:bg-black 
after:scale-x-0 
after:transition-transform after:ease-in-out 
hover:after:scale-x-100">아무 글자 1줄</a>

 

핵심: 가상선택자에 scaleX를 0으로 해뒀다가 hover시 scaleX를 1이 되게