[jQuery] CSS 가상 클래스 ::after, ::before 에 대해서는 지정 불가능

아이콘에 가상 클래스 after를 붙여 불투명한 커버를 씌웠고

hover 시에 투명하게 만들어 뚜렷해지게 했었다.

 

그런데 나는 클릭했을 때에도 유지시키고 싶어서 제이쿼리에서 토글 클래스로 집어넣으려 했는데,

아무리 해도 after에 접근이 안 됐다. (위 캡처는 일부분이고, 이렇게도 해보고 저렇게도 해보던 상황..)

알고보니 제이쿼리를 사용할 때는 가상 클래스 after, before를 선택할 수 없던 것..

 

그래서 after 대신 클릭할 때마다 span 태그를 만들어서 거기에 스타일을 먹여서 쓰기로 했다. 

 

 

 

	// 품목 선택하면 밝아진 상태 유지
   	$(".icon").append("<span></span>");
	$(".icon").click(function(){
    	if($(this).hasClass("on")) {
	    	$(this).removeClass("on");
	    	$(this).append("<span></span>");
	    	$(this).siblings(".icon_name").children("span").css("opacity", "0");
	    	$(this).siblings(".icon_name").css("color", "#333");
    	} else {
	    	$(this).addClass("on");
	    	$(this).children("span").remove();
	    	$(this).siblings(".icon_name").children("span").css("opacity", ".8");
	    	$(this).siblings(".icon_name").css("color", "#fff");
    	}
	}); // 품목 선택 끝

(이름 부분에도 before 가상선택자를 써서 스타일 줬었는데 그것도 span으로 바꿨고, 이름의 span까지 append로 붙이긴 복잡하니 그건 그냥 html 내에 추가해줬다.)

.icon_box {
   display : inline-block;
   vertical-align: top;
   width : 80px;
   margin : 0px 15px;
}

.icon {
   display: inline-block;
    vertical-align: top;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background-color: white; 
    border: 0.8px solid #ababab;
    box-shadow: 1px 1px 5px -0.5px #ccc;
    cursor: pointer;
    line-height: 76px;
    position: relative;
}

.icon span {
   content: "";
   height: 80px;
   width: 80px;
    border-radius: 50%;
    background-color: rgb(0 0 0 / 10%);
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.4s;
}

.icon_box:hover .icon span, .icon.on span {
   background-color: transparent;
}

.icon_cover {
   display: inline-block;
    vertical-align: top;
    height: 80px;
    width: 80px;
    border-radius: 50%;
   background-color: #ddd;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
}

.icon:hover .icon_cover {
   opacity: .2;
}

.icon img {
   height: 60px;
    width: 60px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
}

.icon_name {
   display: inline-block;
    vertical-align: top;
    height: 20px;
    width: 80px;
    margin-top: 7px;
    font-size: 12px;
    font-family: 'SUIT-SemiBold';
    line-height: 20px;
   border-radius: 10px;
    position: relative;
    transition: 0.3s;
    background-color: transparent;
}

.icon_name span {
   content: "";
   width: 100%;
   height: 20px;
   background-color: var(--btn-color);
   border-radius: 10px;
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   z-index: -1;
   opacity:0;
   transition: 0.4s;
}

.icon_box:hover .icon_name span {
   opacity: 0.8;
}

.icon_box:hover .icon_name {
   color: #fff;
}

해결!