JQuery select pseudo-element :after

css, javascript, jquery

Solution

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/

Problem

I want to select pseudo-element `:after` This is my css : ``` show-more:after { content : (" > "); } ``` `JQuery` code ``` $(function(){ $('.show-more:after').click(function() { alert("Yes"); }); }); ```

Original source

Related problems