如何使用 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中文網其他相關文章！