@helpmeplease196

Почему не отображаетеся псевдоэдемен :before?

<body>



  
  <div class="wrap">
  <div class="circle">
    <div class="inset_circle">
      <div class="triangle"></div>
    </div>
  </div>
  </div>


</body>


*{ padding: 0;
  margin: 0;}

html, body {height: 100% ;
background-color:black }


.wrap{
  display: flex;
  height: 100%;
  justify-content: center;
  align-items:center;
}






.circle{
  display: flex;
  height: 100%;
  justify-content: center;
  align-items:center;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  position: relative;
  background:black;
  box-shadow: 0 0 300px aqua;

}

 

.circle:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  border-radius: 50%;
  box-shadow: -10px 10px 0 0#e8eee7;
  transform:  rotate( -10deg) scale(0.7, 0.7) translate(-10px, 40px) ;
  filter: blur(10px)
  
}
.circle:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background-color: #e8eee7;
  border-radius:10%;
  transform:   rotate(60deg)  scale(0.3, 0.1) translate(0px, -1000px)  ;
  filter: blur(1.5rem)
   
}


.inset_circle{
  width: 50%;
  height: 50%;
  background-color: black;
  border-radius: 50%;
  box-shadow: 0 0 10px white;
position: relative;
}

.inset_.circle:before {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(226, 43, 134);
  box-shadow: 0 0 40px rgb(208, 2, 2);
  position: absolute;
}


Не отображается псевдоэлемент .inset_.circle:before

Знаю, что у родителя должно быть position relative, у псевдоэлемента absolute. Но это не срабатыывает, что не учетно ?
  • Вопрос задан
  • 23 просмотра
Решения вопроса 1
@Maks_Min
класс элемента .inset_circle, а before вы пишите для .inset_.circle:before. Точка лишняя перед circle.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы