I am having follwoing HTML
<div id="Chevron" style="width: 100%">
<ul>
<li>
<a href="#" style="z-index: 6; width: 80px;">Create New Request.</a>
</li>
<li>
<a href="#" style="z-index: 5; width: 80px;">Add NPAC Document.</a>
</li>
<li>
<a href="#" style="z-index: 4; width: 80px;">Send To reviewers</a>
</li>
</ul>
</div>
In my css class i am having
#Chevron ul li a:after {
z-index: 1 ;
content: "" ;
border-top: 40px solid transparent ;
border-bottom: 40px solid transparent ;
border-left: 40px solid #3498db ;
position: absolute; right: -40px; top: 0 ;
}
So now i want to change color of all three elements of ul. So i am using jquery for this.
$(document).ready(function () {
$("#Chevron ul li a").each(function (index, element) {
$(element).css('background', cars[index]);
//$(element).css('border-left-color', cars[index]);
});
});
But it only changing color of anchore element not it's a:after border left color.
So how can i change color of a:after element.
Thanks