JSFiddle - React, Tailwind, and code Playground

HTML

<p>First P - can't detect mouse events</p>
<p data-before="before"><span>Second P - can detect mouse events</span></p>
<div id="logs"></div>

CSS

p {
    position: relative;
    background-color: blue;
    color:#ffffff;
    padding:0px 10px;
    pointer-events:none;
}
p:before {
    content: '2';
    margin-left:-10px;
    margin-right:10px;
    position: relative;
    background-color: red;
    padding:0px 10px;
    pointer-events:auto;
}
p span {
    background:#393;
    padding:0px 10px;
    pointer-events:auto;
}

JavaScript

$(document).on('click', 'p', function() {
    $('#logs').append(event.target.tagName + '<br />');
});