I need to move the pseudo element after the original element

Question

I need help with the following issue. I have two boxes for which I have the z-index property defined, and the property does not work the way I want. The gray box should be behind the blue one because it has a defined z-index with a lower value. I enclose the code. Can someone please explain to me where I am making a mistake? Thank you.

The code is here https://jsfiddle.net/rvnhkqd4/1/

HTML <div class="a"></div>

CSS

.a {
    position: relative;
    width: 353px;
    height: 293px;
    background: blue;
    margin-right: 30px;
    z-index: 10;
}

.a::after {
    content: "";
    position: absolute;
    background: #c1bfbf;
    width: 210px;
    height: 210px;
    bottom: -30px;
    right: -30px;
    z-index: -10; /* Should be behind the blue box, but it is not */
}