title: Full width background element with pseudo-class - z-index?
body: <p><strong>EDIT:</strong> I found out that when I delete the z-index of the parent element it works. Anyway ... is there a less "hackish" way to accomplish all that? It works but really feels very hackish.</p>
  
  <p>I try to make a full width pseudo element behind a centered 50% row. It works fine (code looks very hackish, though) but I can't get the pseudo elements z-index behind its parent:</p>
  
  <p><a href="http://codepen.io/herrfischer/pen/JXMmNB" rel="nofollow">> Visit codepen-battleground here.</a></p>
  
  <p>This is the SCSS code:</p>
  
  <pre><code>html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  .content {
    background-color: blue;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 50%;
    z-index: 1;
    padding: 2em;
  
    &amp;:after {
          content: "";
          display: block;
          height: 100%;
          left: -50vw;
          opacity: .7;
          position: absolute;
          right: 0vw;
          top: 0;
          width: 200vw;
          z-index: -1;
          border: 10px solid green;
          box-sizing: border-box;
          background-color: tomato;
      }
  }
  </code></pre>
  
  <p>Is there a trick to do this? I'd love to get this working.</p>