CSS :: before 또는 :: after 를 자바스크립트로 제어하는 방법

질문 : 자바 스크립트 (또는 jQuery)를 사용하여 :: before 및 :: after와 같은 CSS 의사 요소 선택 및 조작

---

::before 및 ::after (및 하나의 세미콜론이있는 이전 버전)과 같은 CSS 의사 요소를 선택 / 조작하는 방법이 있습니까?

예를 들어 내 스타일 시트에는 다음 규칙이 있습니다.

.span::after{ content:'foo' }

바닐라 JS 또는 jQuery를 사용하여 'foo'를 'bar'로 어떻게 변경할 수 있습니까?

답변

---

데이터 속성이있는 의사 요소에 콘텐츠를 전달한 다음 jQuery를 사용하여이를 조작 할 수도 있습니다.

HTML에서 :

<span>foo</span>

jQuery에서 :

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

CSS에서 :

span:after {
    content: attr(data-content) ' any other text you may want';
}

'다른 텍스트'가 표시되지 않도록하려면 다음과 같이 스콜 레가의 솔루션과 결합 할 수 있습니다.

HTML에서 :

<span>foo</span>

jQuery에서 :

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

CSS에서 :

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

출처 : https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin