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

#html #jquery #css

Давно мучает этот вопрос меня , реализовал для примера вот такую конструкцию :



$(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.






Ответ 2

Псевдоэлементы before и after (и все остальные псевдоэлементы) - это shadow dom,
они скрыты браузером от манипуляции через javascript. Поэтому, на них невозможно повесить
обработчики событий, невозможно получить и изменить их стили и т.п.

Исходя из этого, вашу задачу решить средствами js невозможно.

Такую задачу можно попробовать решить на чистом css при помощи чекбоксов или псевдокласса
target (это обычные средства для реализации табов, всплывающих окон и т.п. на css),
но я сходу не соображу, насколько эта техника совместима с псевдоэлементами.