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.
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.
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments