click ::before element jquery

 HTML

<p data-before="before">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: attr(data-before);
    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;
}

 

JQUERY

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


working sample: http://jsfiddle.net/fasoeu/0vygmnnb/