使用jQuery访问css“：after”选择器

Question

我有以下CSS：

.pageMenu .active::after {
    content: '';
    margin-top: -6px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 14px solid white;
    border-left: 14px solid transparent;
    border-bottom: 14px solid white;
    position: absolute;
    right: 0;
}

我想使用jQuery更改顶部，左侧和底部边框的边框宽度。我使用什么选择器访问该元素？我尝试了以下方法，但似乎没有用。

$('.pageMenu .active:after').css(
        {
            'border-top-width': '22px',
            'border-left-width': '22px',
            'border-right-width': '22px'
        }
    )

Answer 1

您无法操作:after，因为从技术上讲，它不是DOM的一部分，因此任何JavaScript都无法访问它。但是您 可以
添加具有:after指定的新类的新类。

CSS：

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS：

$('.pageMenu .active').toggleClass('changed');

更新： 虽然不可能 _直接_修改:after内容，但是有一些方法可以使用JavaScript读取和/或覆盖它。有关技术的完整列表，请参见“使用jQuery操作CSS伪元素（例如：before和：after）”
。