JSFiddle - React, Tailwind, and code Playground

by XCanG

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 {
	display: contents; /* remove any rendering of this element */
	pointer-events: auto;
}

JavaScript

const all_p = Array.from(document.querySelectorAll('p'));

const listener = (event) => {
	document.getElementById('logs').innerHTML += event.target.tagName + ' - ' + event.type + '<br />';
};

const event_list = ['click', 'mouseover'];
for (let event of event_list) {
	for (let p of all_p) {
		p.addEventListener(event, listener, false);
	};
};