How to assign click to text which is in :after/:before?

Question

JavaScript

Hello everyone, now I'm sawing a simple pop-up window for the site.
So, I don’t want to make a separate div or span for the cross (window closing), I stuffed it into :after

So, how do I assign a click event not to the entire window, but only to its first element :after ? And is it even real?

For clarity, here is the code: jsfiddle.net/t3do8rjs

Now the window closes when you click on the window itself, but you need it to close only when you click on the inscription "close"

Answer 1

if you really want it, you can ....
not entirely fair - but it works
= err -ref -->> like this: https://jsfiddle.net/t3do8rjs/
Sorry..., could not get the correct link
correct the script
-- ---------------------
$('.popUp').click(function(){
if (this.offsetWidth - event.offsetX < 0) {
$( '.popUp').addClass('close');
}
});
found. example here :
https://jsfiddle.net/t3do8rjs/1/

Answer 2

It is forbidden. :after/:before do not belong to the DOM tree, so the browser cannot determine the events related to them.
The TroubleInThat solution has its place, but it's a crutch and not worth it. It is better and more correct to make a separate div/span for the desired block.

Answer 3

No idea if that's what TroubleInThat meant , but you can do it like this, specifically for your example:

$('.popUp').click(function(e){
 if(
   e.clientX > $(this).offset().left + $(this).outerWidth() 
   //Ваш :after находится за пределами .popUp.
   //При клике смотрим текущие координаты мыши 
   //Если она за пределами .popUp, то следовательно - клик произошел по псевдоэлементу
 ){
   $('.popUp').addClass('close');
 }
});

But in general, this is a crutch and it is much more correct to use ordinary elements.