javascript - 如何更改伪 anchor 的边框颜色

Question

我有以下 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>

在我的 CSS 课上

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

所以现在我想更改 ul 的所有三个元素的颜色。所以我为此使用 jquery。

$(document).ready(function () {
    $("#Chevron ul li a").each(function (index, element) {
        $(element).css('background', cars[index]);
        //$(element).css('border-left-color', cars[index]);
    });
});

但它只改变 anchor 元素的颜色，而不是 a:after border left color。

那么我怎样才能改变 a:after 元素的颜色。

谢谢

Answer 1

如前所述，这是 Access the css ":after" selector with jQuery 的副本

您无法访问元素的 :after 属性，因为它实际上并不存在于 DOM 中。相反，您可以添加/更改元素的 css 类。

这是一个片段

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