您需要删除转换并将其替换为其他内容，然后才能将伪元素移到后面：

:root{

  --size:200px;

}

#background {

  width:100%;

  height:100%;

  position:absolute;

  top:0;

  left:0;

  background: linear-gradient(-23.5deg, #000033, #00001a);

  z-index:-2;

}



#background #mainplanet {

  width:var(--size);

  height:var(--size);

  background:#fff;

  position:relative;

  top:calc(50% - var(--size)/2);

  left:calc(50% - var(--size)/2);

  border-radius:50%;

}



#background #mainplanet:before,#background #mainplanet:after{

  content:"";

  width:calc(var(--size) * 1.5);

  height:calc(var(--size) / 2);

  border:30px solid #000;

  position:absolute;

  top:10px;

  left:-80px;

  border-radius:50%;

  transform: rotateX(66deg) rotateY(170deg);

}



#background #mainplanet:before{

  border-top-color:transparent;

}



#background #mainplanet:after{

  z-index:-3;

}


<div id="background">

  <div id="mainplanet">

  </div>

</div>

正如我们在规范中所读到的：

1. 以树顺序的所有 position ，opacity或 transform子代 ，分为以下类别：
   1. 所有以“ z-index：auto”或“ z-index：0”排列的后代，按树顺序排列。对于那些使用“
      z-index：auto”的元素，将其视为已创建新的堆栈上下文， 但是任何定位的后代和实际创建新堆栈上下文的后代均应视为父堆栈上下文的一部分
      ，而不是此新 堆栈上下文的一部分。 。对于“ z-index：0”的对象，将视为自动生成的堆栈上下文。
   2. 所有不透明度小于1的不透明度子代，以树顺序创建原子生成的堆栈上下文。
   3. 所有具有除非以外的其他变换的变换后代，均以树顺序 创建原子生成的堆栈上下文 。
      

因此，此处的技巧是避免定位的伪元素属于其父堆栈上下文，从而能够考虑较高的堆栈上下文来放置 它， 从而可以将 其 放置 在其父 堆栈的
后面 。

因此父元素不应该z-index指定，不透明度小于1，请使用transform等等。