Измените CSS: после псевдоэлемента, используя jQuery

Question

Я использую псевдоэлемент :after, чтобы отобразить украшение (треугольник) после блока (<li> в моем случае). Идея состоит в том, чтобы отличить выбранный в настоящий момент li от других.

Fiddle here

HTML, следующим образом:

<ul> 
    <li class="active" style="background-color: hsl(108, 60%, 50%)">One</li> 
    <li style="background-color: hsl(36, 60%, 50%)">Two</li> 
    <li style="background-color: hsl(252, 60%, 50%)">Three<li> 
</ul> 

и CSS:

ul li { 
    width: 300px; 
    height: 30px; 
    border: 1px dashed; 
    position: relative; 
} 

li.active::after { 
    content: " 0020"; 
    display: block; 
    font-size: 0px; 
    position: absolute; 
    left:100%; 
    top: 0%; 
    width: 0px; 
    height: 0px; 
    background: transparent; 
    border: 17px solid transparent; 
    border-left-color: #FF3900; 
} 

Я хочу, чтобы изменить атрибут border-left-color стиля li.active::after псевдо элемента в соответствии с background-color из <li> элемент с class=active.

я придумал следующий JQuery:

$("ul li").click(function() { 
    $("ul li").removeClass("active"); 
    $(this).addClass("active"); 
    $("li.active::after").css('border-left-color', $(this).css('background-color')); 
}); 

Это не работает, как ожидалось. Любая помощь приветствуется.

Answer 1

Вы не можете выбрать псевдоэлементы, такие как: before и: after с jquery. Но в вашем случае, вы можете сделать обходной путь, чтобы использовать стиль родительского Ли на: после того, как и, таким образом, соответствует свойству границы цвета

codepen

CSS обновление:

ul li { 
    width: 300px; 
    height: 30px; 
    border: 1px dashed; 
    position: relative; 
} 
li:first-of-type.active { 
    border-left-color: green; // your exact colors here 
} 
li:nth-of-type(2).active { 
    border-left-color: orange; 
} 
li:last-of-type.active { 
    border-left-color: purple; 
} 
li.active::after { 
    content: " 0020"; 
    display: block; 
    font-size: 0px; 
    position: absolute; 
    left:100%; 
    top: 0%; 
    width: 0px; 
    height: 0px; 
    background: transparent; 
    border: 17px solid transparent; 
    border-left-color: inherit; 
} 

, а затем просто удалить строка js, которая включает: после селектора. больше не нужен

Answer 2

Я уже писал, как @DMTinter представил свой ответ, так извинения за дубликат:

---

Использования Пограничного-Color Property Of Your Родительского элемента

Потому что вы можете» t select :after & :before Псевдо элементы в JQuery (я не могу найти ссылку на это извините), вам придется играть с CSS-элементом родительского элемента, чтобы он работал:

http://jsfiddle.net/kbpg6/2/

В соответствии с вашим кодом:

<ul> 
    <li class="active" style="background-color: hsl(108, 60%, 50%); border-color: hsl(108, 60%, 50%)">One</li> 
    <li style="background-color: hsl(36, 60%, 50%); border-color: hsl(36, 60%, 50%)">Two</li> 
    <li style="background-color: hsl(252, 60%, 50%); border-color: hsl(252, 60%, 50%)">Three<li> 
</ul> 

ul li { 
    width: 300px; 
    height: 30px; 
    border: 1px dashed; 
    position: relative; 
    border-color: #ccc; /* -> default "arrow" colour */ 
} 

li.active:after { 
    content: " 0020"; 
    display: block; 
    font-size: 0px; 
    position: absolute; 
    left:100%; 
    top: 0%; 
    width: 0px; 
    height: 0px; 
    background: transparent; 
    border: 16px solid transparent; 
    border-left-color: inherit; 
}