css改变伪元素color,使用jQuery修改：after伪元素的CSS

I use the :after pseudo-element to display a decoration (triangle) after a block (

in my case). The idea is to distinguish the currently selected li from others.

The html follows:

• One
• Two
• Three

and the 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;

}

I want to change the border-left-color style attribute of li.active::after pseudo element to match the background-color of the

element with class=active.

I came up with the following jquery:

$("ul li").click(function() {

$("ul li").removeClass("active");

$(this).addClass("active");

$("li.active::after").css('border-left-color', $(this).css('background-color'));

});

This doesn't work as expected. Any help is appreciated.

解决方案

you can't select pseudo elements such as :before and :after with jquery. But in your case you can do a workaround to use the parent li's style on the :after and thus match the border-color property

CSS updated:

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;

}

and then just remove the line of js that includes the :after selector. not needed anymore