Как создать наложение CSS с псевдоэлементом?

.modal {
     position:fixed;
     top:100px;
     margin-left: auto;
     margin-right: auto;
     left:0;
     right:0;
     width:500px;
     display:none;
     border:2px solid #736D61;
     background:#fff;
     padding:10px;
}
.modal:after {
     position:fixed;
     top:0px;
     left:0px;
     width:100%;
     height:100%;
     background:rgba(0,0,0,0.5);
}

Я пробовал это, но это не работает.

5
Jason DeClau 3 Янв 2016 в 23:37

2 ответа

Лучший ответ

Вероятно, это не работает, потому что псевдоэлемент не создается, если content значение опущено. Значение по умолчанию content - none, поэтому, вероятно, вы не видите псевдоэлемент. Поэтому вам необходимо указать значение, отличное от none для свойства content:

.modal:after {
  content: '';
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

Также стоит упомянуть, что, поскольку псевдоэлемент по существу добавляется как дочерний элемент, он будет расположен над элементом .modal, так как контекст стекирования установлен. Чтобы обойти это, вы можете добавить псевдоэлемент :before к родительскому элементу .modal следующим образом:

.modal {
  position: fixed;
  top: 100px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 500px;
  border: 2px solid #736D61;
  background: #fff;
  padding: 10px;
}

.modal-overlay:before {
  content: '';
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
<div class="modal-overlay">
  <div class="modal">MODAL</div>
</div>
4
Josh Crozier 3 Янв 2016 в 20:49

Другое решение - использовать border-box. Не нужны псевдоклассы:

.modal {
  background-color: #fff;
  left: 50%;
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
  padding: 20px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);  
  z-index: 999;   
}

Пример Codepen

Он также работает с контуром:

outline: 9999px solid rgba(0,0,0,0.6);

Быстро и легко ^^

0
dragoeco 1 Дек 2019 в 22:36