Event listener on a CSS pseudo-element, such as ::after and ::before?

Was looking for a solution and found this thread. Now want to share my workaround:

CSS

element { pointer-events: none; }
element::after { pointer-events: all; }

JS

element.addEventListener('click', function() { ... });

This works if you don’t need any pointer events on element. Check it in action.