带有伪元素的 CSS 叠加

如何使用伪元素创建 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);
}

我已经尝试过这个，但它不起作用。

它可能不起作用，因为如果以下情况，则不会生成伪元素content值被省略 http://www.w3.org/TR/CSS21/generate.html#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>