How Can I Modify CSS :after Pseudo-elements Using jQuery?

Accessing the CSS ":after" Selector with jQuery

The ":after" pseudo-element is often used in CSS to add additional visual elements to a specific HTML element. However, accessing this pseudo-element with jQuery can be challenging as it is not directly part of the DOM.

jQuery Method

The provided jQuery code attempts to modify the border width of the ":after" element, but it does not work because ":after" is not a valid CSS selector. Instead, jQuery can manipulate the class of the parent element and toggle an additional "changed" class to access the ":after" element.

CSS and jQuery Code:

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

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

This code will add a "changed" class to the active menu item, which will trigger the additional CSS rules applied to the ":after" pseudo-element for the "changed" class.

Note:

While the above solution provides a workaround, it's important to remember that ":after" pseudo-elements are not technically part of the DOM and cannot be directly manipulated with JavaScript. However, there are libraries and techniques available for modifying pseudo-elements indirectly. Refer to "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" for more information on these techniques.

The above is the detailed content of How Can I Modify CSS :after Pseudo-elements Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!