CSS/CSS trick
-
[CSS trick] hover 밑줄 애니메이션 만들기CSS/CSS trick 2023. 10. 31. 17:41
밑줄 스타일은 text-decoration 속성으로 쉽게 스타일링할 수 있는데, 해당 속성에 애니메이션이 적용되진 않습니다. 대신 background 속성을 활용한 밑줄 애니메이션을 알아보겠습니다. 1. 기본 밑줄 background-image: linear-gradient로 밑줄을 만들어줍니다. 초기엔 background를 그리지 않다가 hover 시 background를 그려냅니다. 기본 밑줄을 만들기 위한 필수 CSS 스타일 입니다. .underline { display: inline; // 블럭요소인 경우 밑줄이 제대로 그려지지 않으니 참고! font-size: [폰트사이즈]; background-image: linear-gradient([밑줄색], [밑줄색]); background-repeat:..