블릿아이콘 회전부분이 좀 이해가안가

Question

.title:before { position : absolute ; content : ' \f105 ' ; font-family : fontawesome; right : 10px ; top : 7px ; transition : 0.3s ; } .title.active:before { transform : rotate ( 90deg ); color : orange ; } 저는 before가상클래스에 넣었는데요 그 가상클래스에 속하는 content를 90도 회전시킨다는 의미라는건 알겠는데 .title:before 가상클래스와 .title.active:before 가상클래스는 content부분을 따로 선언해주지 않고도 기준이 되는 content가 .title:before가 기준이면서 .active라는 클래스가 추가됐을경우를 의미하는건가요? 잘 작동되는거 보면 의미는 받아들이겠지만.... .active 가 없는 클래스의 가상클래스가 기준이 되고 거기에 transition을 넣는게 헷갈리긴 합니다.^^;;;

코딩웍스(Coding Works) · Answer

.title.active:before 는 독립적으로 역할을 하는게 아니라 .active라는 클래스는 제이쿼리로 클래스가 html에 들어갈 때만 작동하는 클래스입니다. transition: 0.3s; 은 .title:before 가 변화하는 것이기 때문에 .title:before에 넣우주어야 합니다.