Есть ли способ закрыть блок при клике на его after?

Давно мучает этот вопрос меня , реализовал для примера вот такую конструкцию :
$(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; }

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.