I cannot use the CSS pseudo-element with Jquery

Question

I want, when clicking on the pseudo-element, the menu opens, I tried several codes but none worked, the last one I tried was this :

$('#overlay-menu').after().click(function(){
    var menu = $('#overlay-menu'); //Antes eu tentei usar o this, porém, sem sucesso também
    if (menu.className != 'open') {
        menu.className == 'open';
    }
});

Answer 1

According to this answer in the Soen:

This is not possible; pseudo-Elements are not part of the DOM at all so you can’t bind any Events directly to them, you can only bind to their Parent Elements.

That is to say:

This is not possible, pseudo-elements are not part of the DOM, so you can not delegate events directly to these, you can only delegate to your parents (parents)

However I leave here a better alternative (toggleClass) to what you are doing:

$('#overlay-menu').click(function(){
    $(this).toggleClass('open');
});

.open {
  color: red;  
}
#overlay-menu:after {
  content: '++++'
}

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="overlay-menu">HEYA</p>