CSS hover transition event

 

 

위와 같은 박스에 마우스를 올리면 아래와 같은 파란 선이 왼쪽에서부터 시작하여 0.2초안에 완성되고 싶을 때 어떻게 해야할까?

 

 

결과적으로 보여질 파란선에 대한 html, css 코드를 완성을 한 후 초기 설정을 width:0 로 한다.

이 때, 가상 선택자를 사용하면 css만으로 파란선에 대한 코드를 완성할 수 있다.

 

hover 했을 때 width:100%로 주고, 가상선택자에 transition으로 시간을 0.2s로 설정하면 완성된다.

아래 코드를 보면서 다양한 변경을 해보면 이해될 것이다.

 

css 코드

html 코드