CSS animation by before

박스를 색칠하는 애니메이션을 만들려면 어떻게 해야할까?

 

답은 ::before를 활용하여 구현한다.

 

핵심 아이디어는 다음과 같다.

before와 색칠할 박스의 width, heigth를 동일하게 설정

position: absolute 사용하여 layer를 위로 이동

초기 width는 0으로 해두고 호버시  100%로 변경

 

색칠할 때 왼쪽에서 부터 오른쪽까지 채워지는 형태를 생각해볼 수 있다. 

예시 코드)

a:before{

width:0; height:100%:

 

display:block; position:absolute;

 

content:'';

background-color: black;

transition: all 1s;

}

a:hover:before{width:100%}