Access the css “:after” selector with jQuery [duplicate]

by

You can’t manipulate :after, because it’s not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new :after specified.

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');

UPDATE: while it’s impossible to directly modify the :after content, there are ways to read and/or override it using JavaScript. See “Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)” for a comprehensive list of techniques.

More Related Contents:

  1. Why is my jQuery :not() selector not working in CSS?
  2. jQuery or CSS selector to select all IDs that start with some string [duplicate]
  3. How do I access style properties of pseudo-elements with jQuery? [duplicate]
  4. Selecting elements with a certain background color
  5. What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?
  6. Difference between CSS selector and jQuery filter?
  7. Changing the child element’s CSS when the parent is hovered
  8. How can I select an element with multiple classes in jQuery?
  9. jQuery how to find an element based on a data-attribute value?
  10. Wildcards in jQuery selectors
  11. Set select option ‘selected’, by value
  12. jQuery change class name
  13. Auto-scaling input[type=text] to width of value?
  14. Bind event to right mouse click
  15. Find text string in jQuery and make it bold
  16. Can I change the scroll speed using css or jQuery?
  17. How can I detect if a selector returns null?
  18. jQuery: select an element’s class and id at the same time?
  19. expand/collapse table rows with JQuery
  20. jQuery attribute name contains
  21. auto resize text (font size) when resizing window?
  22. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery [closed]
  23. jQuery scrollTop not working in Chrome but working in Firefox
  24. Creating a hole in a element
  25. A cleaner way to select by multiple possible attribute values?
  26. How to force a hover state with jQuery?
  27. Apply CSS to jQuery Dialog Buttons
  28. How to select specific form element in jQuery?
  29. Use jQuery to Detect Container Overflow?
  30. How to use multiple jquery object variables as selectors?

Leave a Comment