在两个元素之间放置伪元素

Question

是否可以显示在子级和父级之间设置在子级上的伪元素（颜色：蓝色>红色>绿色）？

我尝试了很多事情，但是如果不更改以下html结构就无法实现。

.parent {
  width: 100%;
  height: 200px;
  background: blue;
}
.child {
    background: green;
    position: relative;
    width: 150px;
    height: 150px;
    float: left;
    margin-left: 50px;
}

.child:before {
    content: "";
    background: red;
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    z-index: -1;
}

<div class="parent">
  <div>
  
  <div class="child"></div> 
  </div>
</div>


<div class="child" style='margin-top: 20px;'></div>