JQuery select pseudo-element :after [duplicate]

by

It’s not possible to bind directly to pseudo-elements, since those are not part of the DOM, but the desired effect can be approximated by binding to a parent element and testing for an offset related to the element that the :after acts upon:

The following renders as ELEMENT++, where clicking on “ELEMENT” and “++” each triggers different behavior:

<span>ELEMENT</span>

span::after {
  content: '++';
  position: absolute;
}

span.c1 {
  background: yellow;
}

span.c2::after {
  background: orange;
}

const span = document.querySelector('span');

span.addEventListener('click', function (e) {
    if (e.offsetX > span.offsetWidth) {
        span.className="c2";
    } else {
        span.className="c1";
    }
});

Interactive: http://jsfiddle.net/wC2p7/1/

More Related Contents:

  1. JS hide function error
  2. Javascript counting all the characters from a HTML document
  3. How to generate a simple popup using jQuery
  4. JSFiddle code not working in my own page
  5. How to get a style attribute from a CSS class by javascript/jQuery?
  6. How to disable scroll without hiding it?
  7. How to dynamically create ‘@-Keyframe’ CSS animations?
  8. TypeError: $(…).DataTable is not a function
  9. Make scrollbar visible in mobile browsers
  10. Infinity Loop Slider Concepts
  11. jQuery counting elements by class – what is the best way to implement this?
  12. Text blinking jQuery
  13. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  14. jQuery vs document.querySelectorAll
  15. Reverse Scrolling
  16. infinite-scroll jquery plugin
  17. How to dynamically modify in materialize css framework
  18. Better way to prevent browser caching of JavaScript files
  19. How to make Jquery UI Tabs scroll horizontally if there are too many tabs
  20. Change CSS properties on click
  21. simulate background-size:cover on or
  22. Show text letter by letter
  23. Change text on hover, then return to the previous text
  24. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  25. Select a row from html table and send values onclick of a button
  26. jQuery: Change element type from hidden to input
  27. jQuery equivalent of YUI StyleSheet Utility?
  28. How did YouTube create a fluid video player?
  29. Delay Removing a Class in Jquery [duplicate]
  30. Change background on button click, using CSS only? [duplicate]

Leave a Comment