如何使用 jQuery 修改 CSS :after 伪元素？

使用 jQuery 操作伪元素：访问“:after”选择器

修改 CSS 伪元素，例如“:after”可以在 jQuery 中提出了挑战。虽然直接更改其属性是不可能的，但存在替代方法。

了解限制

":after" 元素不是标准 DOM 的一部分，导致它们无法访问通过 JavaScript。因此，尝试使用如下选择器修改样式是行不通的。

$('.pageMenu .active:after').css(...)

使用动态类的解决方法

一种解决方法是动态地将具有修改样式的新类添加到元素。例如：

CSS:

JS:

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

此方法添加“已更改”类，它用修改后的样式覆盖原始的“:after”样式

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

替代技术

除了动态类解决方法之外，还存在各种技术来使用 JavaScript 读取或修改伪元素样式。请参阅：

“使用 jQuery 操作 CSS 伪元素（例如：:before 和 :after）”以获得全面的指南。

以上是如何使用 jQuery 修改 CSS :after 伪元素？的详细内容。更多信息请关注PHP中文网其他相关文章！