Здесь много ответов, но ни один из них не помогает манипулировать css :before или :after, даже не принятым.
Вот как я предлагаю это сделать. Предположим, ваш HTML выглядит следующим образом:
<div id="something">Test</div>
И затем вы устанавливаете его: before в CSS и проектируете его следующим образом:
#something:before{
content:"1st";
font-size:20px;
color:red;
}
#something{
content:'1st';
}
Обратите внимание, я также установил атрибут content в самом элементе, чтобы вы могли легко его удалить позже.
Теперь есть щелчок button, для которого вы хотите изменить цвет: before на зеленый и его размер шрифта на 30px. Вы можете достичь этого следующим образом:
Определите CSS с требуемым стилем для некоторого класса .activeS:
.activeS:before{
color:green !important;
font-size:30px !important;
}
Теперь вы можете изменить стиль: before, добавив класс в элемент your: before следующим образом:
<button id="changeBefore">Change</button>
<script>
$('#changeBefore').click(function(){
$('#something').addClass('activeS');
});
</script>
Если вы просто хотите получить содержимое :before, это можно сделать как:
<button id="getContent">Get Content</button>
<script>
$('#getContent').click(function(){
console.log($('#something').css('content'));//will print '1st'
});
</script>
В конечном итоге, если вы хотите динамически изменять содержимое :before с помощью jQuery, вы можете добиться этого следующим образом:
<button id="changeBefore">Change</button>
<script>
var newValue = '22';//coming from somewhere
var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
$('#changeBefore').click(function(){
$('body').append(add);
});
</script>
При нажатии выше кнопки «changeBefore» :before из #something изменяется на «22», что является динамическим значением.
Надеюсь, это поможет