Modify CSS of the :after pseudo-element using jQuery

Question

I use the :after pseudo-element to display a decoration (triangle) after a block (<li> in my case). The idea is to distinguish the currently selected li from others.

Fiddle here

The html follows:

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

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 <li> 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.

Answer 1

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

codepen

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

Answer 2

I already wrote this as @DMTinter submitted his answer, so apologies for duplicate:

---

Use The Border-Color Property Of Your Parent Element

Because you can't select :after & :before pseudo elements in JQuery (I can't find a reference for this sorry), you'll have to play with the parent element's CSS to make it work:

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

As per your code:

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