Изменение цвета фона: после - JQuery

Question

Я пытаюсь изменить цвет: после, используя JQuery, хотя я просто не могу его изменить, может кто-нибудь указать мне в правильном направлении пожалуйста?

<script> 
    $(document).ready(function() { 
     $(".breadcrumb li:nth-child(1) a").css({'background-color' : '#f00'}); // Works 
     $(".breadcrumb li:nth-child(1):after ").css({'background-color' : '#f00'}); // Does not work? 
    }); 
</script> 

Я пробовал использовать несколько селекторов, но я просто не могу найти правильный. Заранее спасибо.

Answer 1

Попробуйте это,

CSS

.li-active-after a{background-color : #f00; } 
.li-active-after:after{background-color : #f00; } 

Jquery

Answer 2

Вы не можете манипулировать: после того, как он не является технически частью DOM и поэтому недоступен для любого JavaScript. Но вы можете добавить новый класс с новым: после указанного.

CSS

.breadcrumb li:nth-child(1) .test:after { 
    border-top-width: 22px; 
    border-left-width: 22px; 
    border-right-width: 22px; 
} 

JS

$('.breadcrumb li:nth-child(1)').toggleClass('test'); 

Taken from this answer

Answer 3

Вы не можете изменить стиль (: после) с помощью JQuery. но вы можете решить эту проблему путем вставки DIV в HTML после DIV, который вы используете, то вы можете справиться с этим с помощью JQuery

<div class="mydiv_1"></div> <div class="after_div"></div> 
<div class="mydiv_2"></div> <div class="after_div"></div> 

Вы можете адаптировать этот пример кода/скрипта;)

Answer 4

Вместо добавления другого div для замены: после или с использованием других селекторов есть лучшее решение, просто используя класс. Здесь jsfiddle Нажмите на серую коробку и это добавит class в Div, который изменит цвет его :after