javascript - 无法覆盖 CSS 伪元素 :before

Question

我有几个无序列表项，它们指定密码规则，并使用很棒的字体在所有列表项前面显示一个图标，当我单击按钮时，我有 javascript 调用来检查规则是否满足，根据我必须更改 Font Awesome 图标的条件，请参见下面的代码

 li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 10px;
    }
    li:before {
        position: absolute;
        top: 0;
        left: 0;
        font-family: FontAwesome;
        content: "\f056";
        color: dimgray;
    }

    .myClass{
        position: absolute;
        top: 0;
        left: 0;
        font-family: FontAwesome !important;
        content: "\f058" !important;
        color: forestgreen;
    }

要覆盖 li:before 我有休闲代码

$("#limsg").addClass("myClass");

我应该怎么做才能在运行时获得不同的 Font Awesome 图标？

Answer 1

您的代码是正确的，但要覆盖 li:before，您需要 myClass:before

 .myClass:before{
    position: absolute;
    top: 0;
    left: 0;
    font-family: FontAwesome !important;
    content: "\f058" !important;
    color: forestgreen;
}

您可以查看 plunkr 了解详细信息。 https://plnkr.co/S41mrN