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

使用 jQuery 访问 CSS ":after" 选择器

CSS 中经常使用 ":after" 伪元素来添加额外的内容视觉元素到特定的 HTML 元素。然而，使用 jQuery 访问这个伪元素可能具有挑战性，因为它不是 DOM 的直接一部分。

jQuery 方法

提供的 jQuery 代码尝试修改":after" 元素的边框宽度，但它不起作用，因为 ":after" 不是有效的 CSS 选择器。相反，jQuery 可以操作父元素的类并切换附加的“已更改”类来访问“:after”元素。

CSS 和 jQuery 代码：

.pageMenu .active.changed::after { 
    border-top-width: 22px;
    border-left-width: 22px;
}

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

此代码将向活动菜单项添加一个“changed”类，这将触发应用于“:after”伪元素的附加 CSS 规则对于“changed”类。

注意：

虽然上述解决方案提供了解决方法，但重要的是要记住“:after”伪元素在技术上并不存在DOM 的一部分，不能直接用 JavaScript 操作。然而，有一些库和技术可用于间接修改伪元素。有关这些技术的更多信息，请参阅“使用 jQuery 操作 CSS 伪元素（例如 :before 和 :after）”。

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