Click events on pseudo selectors

by Andrey Izman

HTML

<div><span>ELEMENT</span></div>

CSS

div { margin: 20px; padding:0; }
span:after { content: 'AFTER'; position: absolute; }



span.c1 { background: yellow; }
span.c2:after { background: yellow; }

JavaScript

span = document.querySelector('span');

span.addEventListener('click', function (e) {
    if (e.offsetX ? e.offsetX > span.offsetWidth :
           e.pageX - span.offsetLeft > span.offsetWidth) {
        span.className = 'c2';
    } else {
        span.className = 'c1';
    }
    console.log(e.offsetX, span.offsetWidth, e.pageX, e.pageX - span.offsetLeft);
});