使用 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）” 以获取完整的技术列表。

Answer 2

您可以使用 HTML 为

:after

添加样式。例如：

var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');

Answer 3

如果您使用带有空值的 jQuery 内置

after()

，它将创建一个与您的

:after

CSS 选择器相匹配的动态对象。

$('.active').after().click(function () {
    alert('clickable!');
});

请参阅 jQuery 文档。