title: z-index not working on pseudo-element
body: <p>I have encountered a weird issue, while trying to implement a custom background on website I'm working on.</p>
  
  <p>I've written a proof of concept code piece on codepen and it works perfectly there, but when I try to implement it on website it does not.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: black;
  }
  
  .background-test {
    background: white;
    width: 20%;
    margin: 2% 50%;
    height: 250px;
    padding: 1%;
    position: relative;
  }
  
  .background-test:before {
    width: 100%;
    height: 100%;
    content: "";
    background: red;
    position: absolute;
    z-index: -1;
    bottom: -3%;
    left: -2%;
    -webkit-clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
    clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div class="background-test"&gt;Lorem Ipsum&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/Hassansky/pen/eEaQxG/" rel="nofollow noreferrer">https://codepen.io/Hassansky/pen/eEaQxG/</a></p>
  
  <p>You can see that the :after pseudo element is positioned correctly - in theory. When I try to implement this into the website I'm working on, it just doesn't show. Chrome Dev tools shows it's there, just not displaying it. It does show up when I disable the z-index on dev tools, but then it stacks on top of the parent, as it should.</p>
  
  <p>I tried to look for stacking issues, but I'm at wits end and cannot find any reasonable explanation for this.</p>
  
  <p>This is a Wordpress website loaded with theme, but this should not present an issue with z-index stacking, especially when I cannot find any rule regarding z-indexes there.</p>
  
  <p>Page url: <a href="http://polkrys.pl/cukiernia/podklady-cukiernicze-okragle-biale/" rel="nofollow noreferrer">http://polkrys.pl/cukiernia/podklady-cukiernicze-okragle-biale/</a></p>
  
  <p><a href="https://i.stack.imgur.com/tTZsf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tTZsf.png" alt="I&#39;ve marked which elements should have pseudo-elements on them."></a></p>
  
  <p>I've marked which elements should have pseudo-elements on them.</p>
  
  <p>I'm adding SASS code that relates to elements in question:</p>
  
  <pre><code>.polkrys_shadow {
          position: relative;
          &amp;:before {
              width: 100%;
              height: 100%;
              content: "";
              background: red;
              position: absolute;
              z-index: -1;
              bottom: -3%;
              left: -2%;
              -webkit-clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
              clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
          }
  </code></pre>
  
  <p>The margins and paddings are defined within wordpress visual composer. I suggest inspecting mentioned elements with Dev Tools - you'll see it <em>should</em> work - but it doesn't.</p>