将子元素放在parent :: after伪元素之上？

Question

那么如何将子元素放在其父::after伪元素之上？基本上我有一个带有2个伪元素的背景图像的div：一个::before，它是一个绝对定位的全宽和高度，透明的蓝色和一个::after，它是一个插入框 - 阴影，现在我试图将子元素放在所有父元素的伪元素之上。我怎么能这样做？

这里是一个jsFiddle：http://jsfiddle.net/got3e2vb/ - 我希望将白色圆圈放在父元素之后的's :: after伪元素之上。我怎么能这样做？

Answer 1

z-index就足够了。

试试这个：

#author {
  width: 100%;
  height: 683px;
  overflow: hidden;
  background: url('images/parallax/apartment1.jpg');
  position: relative;
  opacity: 1;
}
#author:after {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: inset 0 0 150px #072243;
  content: ' ';
  opacity: 0.5;
  -webkit-transition: all .40s ease-out;
  -moz-transition: all .40s ease-out;
  -ms-transition: all .40s ease-out;
  -o-transition: all .40s ease-out;
  transition: all .40s ease-out;
}
#author:before {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: #1a6dd3;
  content: ' ';
  opacity: 0.8;
}
#author:hover:after {
  box-shadow: inset 0 0 250px #0f3461;
  opacity: 0.9;
  cursor: pointer;
}
#author-preview {
  position: absolute;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: #fff;
  top: 0px;
  left: 0px;
  z-index: 3;
}

<div id="author">
  <div id="author-preview">
  </div>
</div>

Answer 2

有关标题的更通用的解决方案：

#author:first-child::before  {
    //etc...
}