[CSS] before, after를 이용한 이펙트 만들어보기

#1. hover했을 때 하단부에 선이 생기도록 만들어보기

See the Pen 0104_icon animation by limhaneul2244 (@limhaneul2244) on CodePen.

 

hover했을 때 중앙에서 border가 나타나게 하려면?

/*중앙에서 border 이팩트를 주기 위해서는 아래의 값이 필요하다.*/

.lnb li a:before {
    left: 50%; 
    transform: translatex(-50%);
}

 

:before의 width를 left: 50%로 이동 시킨 뒤 tranlateX(-50%)로 정 중앙으로 다시 재이동시킨다.

:hover했을 때 :before의 width 값은 언제나 100%만들고

:hover되기 전 단계의 :before에 transition을 지정해 준다.

 

---

 

#2. icon 애니메이션 만들어보기

See the Pen 0104_sns_icon animation by limhaneul2244 (@limhaneul2244) on CodePen.