SOURCE

<div class="box">我是一段纯文字...</div>


<div style="margin-top:50px;">
:before 和 :after 会在.box背景色的前面，文字的后面。
这段代码是《css世界》第7章 css世界的层叠规则 里的。
</div>

.box {
  background: blue;
  position: relative;
  z-index: 0; /* 创建层叠上下文 */
  color:#fff;
}
.box:before,
.box:after {
  content: '';
  position: absolute;
  z-index: -1;
}
.box:before {
    top:0;
  left:0;
  width:50px;
  height:50px;
  background: pink;
}
.box:after {
  top:0;
  left:60px;
  width:50px;
  height:50px;
  background: green;
}