使用 jQuery 修改 :after 伪元素的 CSS [重复]

我用:after伪元素在块（<li>就我而言）。想法是区分当前选择的li来自其他人。

在这里摆弄 http://jsfiddle.net/kbpg6/

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 of the <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'));
});

这没有按预期工作。任何帮助表示赞赏。

你不能使用 jquery 选择伪元素，例如 :before 和 :after 。但在您的情况下，您可以采取解决方法，在 :after 上使用父 li 的样式，从而匹配 border-color 属性

codepen http://cdpn.io/DGFEv

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;
}

然后删除包含 :after 选择器的 js 行。不再需要了