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

Question

So how can I place a child element above its parent ::after pseudo-element? Basically I have a div with a background image with 2 pseudo-elements: a ::before, which is an absolute-positioned full-width and height, transparent blue and a ::after, which is an inset box-shadow, and now I'm trying to place child elements above all the parent's pseudo-elements. How can I do that?

Here's a jsFiddle: http://jsfiddle.net/got3e2vb/ - I want the white circle to be placed above the parent's ::after pseudo-element. How can I do that?

Answer 1

z-index is enough.

Try this:

#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>