将子元素置于父元素之上::伪元素之后？

Question

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

这是一个 jsFiddle：http://jsfiddle.net/got3e2vb/ - 我希望将白色圆圈放置在父元素的 ::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...
}

将子元素置于父元素之上::伪元素之后？

Place child element above parent ::after pseudo-element?

css

parent