z-index not working on pseudo-element

[admin]

I have encountered a weird issue, while trying to implement a custom background on website I'm working on.

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.

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

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%);
}

<pre class="snippet-code-html lang-html prettyprint-override">

<div>
  <div class="background-test">Lorem Ipsum</div>
  <div></div>
</div>

</div>
</div>


<a href="https://codepen.io/Hassansky/pen/eEaQxG/" rel="nofollow noreferrer">https://codepen.io/Hassansky/pen/eEaQxG/</a>

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.

I tried to look for stacking issues, but I'm at wits end and cannot find any reasonable explanation for this.

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.

Page url: <a href="http://polkrys.pl/cukiernia/podklady-cukiernicze-okragle-biale/" rel="nofollow noreferrer">http://polkrys.pl/cukiernia/podklady-cukiernicze-okragle-biale/</a>

<a href="

https://imgur.com/tTZsf

" rel="nofollow noreferrer"><img src="

https://imgur.com/tTZsf

" alt="I&#39;ve marked which elements should have pseudo-elements on them."></a>

I've marked which elements should have pseudo-elements on them.

I'm adding SASS code that relates to elements in question:

.polkrys_shadow {
        position: relative;
        &: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%);
        }

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.