Элемент с абсолютным позиционированием не реагирует

Здесь много ответов, но никакой ответ не помогает манипулировать css :before или :after, даже не принятым.

Вот как я предлагаю это сделать. Предположим, что ваш HTML выглядит следующим образом:

<div id="something">Test</div>

И затем вы устанавливаете его: раньше в CSS и проектируете его так:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

Обратите внимание, что я также установил content в самом элементе, чтобы вы могли легко вынести его позже. Теперь есть button щелчок по которому, вы хотите изменить цвет: до зеленого и его размер шрифта до 30 пикселей. Вы можете достичь этого следующим образом:

Определить css с вашим необходимым стилем в каком-то классе .activeS:

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

Теперь вы можете изменить: перед стилем, добавив класс в ваш: перед элементом следующим образом:

<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», что является динамическое значение.

Надеюсь, это поможет