Css / Pseudo element ::在他的容器后面不起作用

Question

我尝试做某事，但它根本不工作。 这看起来非常简单，我希望将:before添加到具有背景的元素，但每次我这样做时，::before都会在容器前面。

    .container{
     position:relative;
     z-index:1;
     background:blue;
     border:1 px solid white;
   }

   .container::before{
      position:absolute;
      content:"";
      z-index:-1;
      top:-10px;
      left:-10px;
      width:calc(100% + 20px);
      height:calc(100% + 20px);
      background:red;
   }