jquery로 :: before이나 :: after 같은 css 요소 변경하기

$("선택자").css('속성', '값');

jquery를 이런식으로 사용하면 css요소를 변경할 수 있다.

 

하지만 ::before이나 ::after같은 css 요소는 jquery로 변경할 수 없다.

왜냐하면 css : after 및 : before 규칙은 DOM의 일부가 아니기 때문이다.

 

하지만 직접적인 방법이 아닌 다른 방법으로 css after나 before 요소를 변경할 수 있다.

다양한 방법이 있지만 자주 사용하는 방법 2가지를 정리했다.

 

 

1. removeClass와 addClass를 이용해서 아예 클래스 자체를 변경해버리는 방법

.arrow_carrot-down:before {
    content: "\33";
}
.arrow_carrot-up:before {
    content: "\32";
}

예를 들어 arrow_carrot-down 클래스의 :before content 속성값을 \32로 바꾸고 싶다고 가정한다.

위와 같이 arrow_carrot-up:before 을 아예 새로 만들어서 

 $('선택자').removeClass('arrow_carrot-down'); 
 $('선택자').addClass('arrow_carrot-up');

이런식으로 클래스를 지운다음에 다시 추가해주면 된다.

 

 

 

2. toggleClass이용해서 클래스 추가하고 삭제하는 방법

일단 toggleClass 설명

$('선택자').toggleClass('aaa');

toggleClass() : 선택자에 aaa 클래스가 없으면 추가하고, 있으면 제거한다.

 

 

사용 방법

span:before {
    content: "hi";
}
span.lala:before {
    content: "hello";
}

$('span').on('click', function() {
    $(this).toggleClass('special');
});

span을 클릭하면 span에 lala class가 추가되어 content 속성을 hello로 만들 수 있다.

 

 

 

 

 

 

 

 

참고 사이트 : https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/21709814#21709814