How to change border color of pseudo anchor

Question

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

possible duplicate of [Access the css ":after" selector with jQuery](http://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery) — pistou, Dec 11 '14 at 10:27

score 0 · Answer 1 · edited May 23 '17 at 12:05

As mentionned, this is a duplicate of Access the css ":after" selector with jQuery

You can't access the :after property of an element since it doesn't really exist in the DOM. Instead, you can add/change the css class of your element.

Here is a snippet

$(document).ready(function () {
    $("#Chevron ul li a").each(function (index, element) {
        // $(element).css('background', cars[index]); // disabled to make the snippet works
        $(this).addClass("changed"); // you're adding the .changed class
    });
});

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

/* this is your .changed class */
#Chevron ul li a.changed:after {
    border-left: 40px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

How to change border color of pseudo anchor

1 Answers1