JSFiddle - React, Tailwind, and code Playground

by Noitidart Molyneux

HTML

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

CSS

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

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

JavaScript

span = document.querySelector('span');

span.addEventListener('mousedown', function (e) {
    console.log('e=', e)
    console.log('e.offsetX=', e.clientX);
    console.log('span.offsetWidth=', span.offsetLeft + span.offsetWidth);
    if (e.clientX > span.offsetLeft + span.offsetWidth) {
        span.className = 'c2';
    } else {
        span.className = 'c1';
    }
});