It has long tormented me with this question, implemented for example the following construction:

$(document).ready(function(){ $(".box1:after").click(function(){ $(".box1").hide(); }); }); 
 *{ margin:0; padding:0; line-height:1; } html,body{ height:100%; } section{ display:block; height:100%; background:rgba(0,0,0,.3); position:relative; } .box1{ width:50%; min-height:200px; max-height:450px; padding:20px; position:absolute; top:0;left:0; bottom:0;right:0; margin:auto; background:#fff; } .box1 p{ font:800 20px Georgia; color:#909090; line-height:1.7; } .box1:after{ content:""; position:absolute; top:0; left:0; display:block; width:20px; height:20px; background:#909090; border-radius:100%; margin:3px; transition:all .1s; } .box1:hover:after{ content:"close"; width:60px; text-align:center; line-height:20px; color:#fff; cursor:pointer; } .none{ display:none; } 
 <section> <div class="box1"> <p>People tend to read writing. Default text is for web developers and designers that need default text quickly. If it is not real text, they will focus on the design. Default text is for web developers and designers that need default text quickly. I hope you enjoyed the fake text. A designer can use default text to simulate what text would look like. Using default text is a simple way to create the appearance of content without having to create it. Thank you for using this application. This text will not appear in a consistent order. This string is randomly generated.</p> </div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scrip

Is there a way, without additional rezmetka (html) to close the parent box1 when clicking on it after? meaning close, you can see the button in the snippet when hover

2 answers 2

There is the following solution to the problem. Removing events from .box1 pointer-events: none; , we put on the pseudo-element .box1:after pointer-events: all;

 $(document).ready(function(){ $("div.box1").click(function() { $('.box1').hide(); }); }); 
 *{ margin:0; padding:0; line-height:1; } html,body{ height:100%; } section{ display:block; height:100%; background:rgba(0,0,0,.3); position:relative; } .box1{ width:50%; min-height:200px; max-height:450px; padding:20px; position:absolute; top:0;left:0; bottom:0;right:0; margin:auto; background:#fff; pointer-events: none; } .box1 p{ font:800 20px Georgia; color:#909090; line-height:1.7; } .box1:after{ content:""; position:absolute; top:0; left:0; display:block; width:20px; height:20px; background:#909090; border-radius:100%; margin:3px; transition:all .1s; pointer-events: all; } .box1:hover:after{ content:"close"; width:60px; text-align:center; line-height:20px; color:#fff; cursor:pointer; } .none{ display:none; } 
 <section> <div class="box1"> <p>People tend to read writing. Default text is for web developers and designers that need default text quickly. If it is not real text, they will focus on the design. Default text is for web developers and designers that need default text quickly. I hope you enjoyed the fake text. A designer can use default text to simulate what text would look like. Using default text is a simple way to create the appearance of content without having to create it. Thank you for using this application. This text will not appear in a consistent order. This string is randomly generated.</p> </div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  • Doofy why in my case does not work? - user33274
  • I do not understand how it works. Shadow dom same as in jQuery he was snooping? Share a link to the explanation? - Alexey Ukolov
  • @Geyan, so, just checked it worked. I'll check again - Mr. Black
  • @Doofy just not on the box itself to close namely on after - user33274
  • @Geyan, there </script> not closed. In the question code "></scrip - Mr. Black

The pseudo-elements before and after (and all other pseudo-elements) are shadow dom, they are hidden from javascript by the browser. Therefore, it is impossible to hang event handlers on them, it is impossible to get and change their styles, etc.

Based on this, it is impossible to solve your problem using js.

You can try to solve this problem on pure css using checkboxes or a pseudo-class target (these are the usual means for implementing tabs, pop-up windows, etc. on css), but I won’t understand how compatible this technique is with pseudo-elements.

  • I have been trying to solve this for two years, and I’m struggling with the release of the new version of jquery and it’s not a fig, but what can I do - if your Checkbox is different, but another specialist helped me and seemed to work - see: codepen.io/Letsrock/pen/ KrQVNg - user33274
  • So after all in an example under the link without pseudo-elements it is made, in it something difficult. - Alexey Ukolov
  • Immediately did not notice - user33274