-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
블릿아이콘 회전부분이 좀 이해가안가
22.03.07 14:42 작성 조회수 170
1
.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을 넣는게 헷갈리긴 합니다.^^;;;
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2022.03.08
.title.active:before 는 독립적으로 역할을 하는게 아니라 .active라는 클래스는 제이쿼리로 클래스가 html에 들어갈 때만 작동하는 클래스입니다.
transition: 0.3s; 은 .title:before 가 변화하는 것이기 때문에 .title:before에 넣우주어야 합니다.
답변 1