JS click before veya after

Burada amaç bir elemanın :before veya ::after kısmına tıklandığını bulmak, bu mümkün ve CSS ile kombine yapıldığında güzel işler çıkartabilir.

Her ne kadar arama yapıldığında stackoverflow’da bir şeyler çıkar ya da yapay zekaya sorulduğunda cevap verebilir(denemedim ama bundan sonra vereceği garanti) ancak internete içerik üretmenin gelecek nesiller için önemini bilen biri olarak spesifik karşılaştığım problemler sonrasında bloguma bu ve benzer bilgileri kaydediyorum.

after örneği şöyle:

jQuery:

$('.targetdiv').click(function(e){
	if (e.offsetX > $(this).width() || e.offsetY > $(this).height()){
		$(this).addClass('target');
		console.log('clicked');
	}
});

Pure JS:

targetdiv = document.querySelector('span');
targetdiv.addEventListener('click', function(e){
	if (e.offsetX > targetdiv.offsetWidth){
		console.log('clicked');
		targetdiv.className = 'target';
	}
});

Github: github.com/wolkanca/-after-CSS-selector-click-event-JS-detection-

Afiyet olsun.