Why does this pseudo-element move above parent when using scale transform?

Question

I have a drop shadow at the bottom left corner of a div. I created it using a ::before pseudo-element. I want the div to scale when I hover over it but when I do so the pseudo-element moves to the top of the stack order. Why does this happen and how can I stop the element from moving to the top?

.grid-item {
    width: 200px;
    height: 200px;
    margin: 100px auto;
    background-color: #c2c8e1;
    border: 1px solid rgba(211, 215, 233, 0.9);
    position: relative;
    transition: transform 0.2s ease-in-out;
}
.grid-item:before {
    content: "";
    z-index: -1;
    width: 60%;
    position: absolute;
    top: 80%;
    bottom: 12px;
    left: 10px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-4deg);
}
.grid-item:hover {
    transform: scale(1.03);
}

<div class="grid-item"></div>

Answer 1

Seems like a bit of a glitch. It's a child of grid-item, if you apply a z-index to grid-item itself you'll find that it is always on top, which makes sense, as grid-item just has a bg colour and since it is position: relative, its child would always be "on top" of it even if it has a lesser zindex.

You could use two pseudo elements -

.grid-item {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  position: relative;
}
.grid-item:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #c2c8e1;
    border: 1px solid rgba(211, 215, 233, 0.9);
    transition: transform 0.2s ease-in-out;
    z-index: 99;
}
.grid-item::before {
    content: "";
    z-index: -2;
    width: 60%;
    position: absolute;
    top: 80%;
    bottom: 12px;
    left: 10px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-4deg);
}
.grid-item:hover {
    transform: scale(1.03);
}

<div class="grid-item"></div>