[CSS] hover할 때 글자아래 줄이 쳐지는 효과 만들기 - pseudo el에 대해

간혹 정부 관련된 홈페이지에서 많이 보이는 효과인 hover 시 밑에 줄이 생기는 애니메이션 입니다. css 만으로도 구현이 가능합니다. 방법은 정말 여러 개가 있을 수 있겠습니다. box-shadow로 transition을 줘도 되구요. 저는 저 선이 좀 둥글둥글 했으면 좋겠어서 pseudo element를 추가해줘서 구현했습니다. 1. Pseudo Element 가끔 개발자 도구로 보다보면 저렇게 ::after나 ::before 같은 걸 볼 수 있는데 저게 바로 의사 요소(pseudo element) 입니다. 우리가 자주 쓰는 hover나 active와 같은 클래스는 의사 클래스(psudo class)라고 하는데요. 마찬가지로 내장되어 암시적으로 사용할 수 있는 css 요소입니다. 어떤 클래스를 기준..

2022.09.22