我不知道我是否能准确地解释为什么你的方法不起作用，部分原因是我甚至不确定我自己是否完全理解它。但长话短说，我认为这与CSS的“transform”属性有关，它创建了一个新的堆栈上下文，它与伪元素进行了奇怪的交互，这些伪元素也创建了自己的堆栈上下文。
但是，有一种更好的方法，使用translateZ()和preserve-3d。具体来说，不是管理伪元素上的z索引，而是使用transform: translateZ(-1px);将它们放在父元素后面。然后，要使其工作，您所要做的就是将transform-style: preserve-3d;应用于.rocket选择器。这适用于所有现代浏览器。下面是完整的代码：

.main-nav-card {
  background: linear-gradient(to bottom, transparent 50%, #1c7ed6 50%);
  background-size: 100% 200%;
  height: 70rem;
  border: 1px solid currentColor;
  padding: 4.8rem 9.6rem;
  border-radius: var(--border-radius-large);
  position: relative;
  z-index: 2;
}

.main-nav-card:hover {
  animation-name: fillCard;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fillCard {
  from {
    background-position: top;
  }
  to {
    background-position: bottom;
  }
}

.rocket {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #000;
  height: 50px;
  width: 25px;
  border-radius: 50% 50% 0 0;
  transform-style: preserve-3d;
}

.rocket::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -15px;
  height: 20px;
  width: 55px;
  border-radius: 50% 50% 0 0;
  background-color: #f03e3e;
  transform: translateZ(-1px);
}

.rocket::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -4px;
  height: 4px;
  width: 15px;
  border-radius: 0 0 2px 2px;
  background-color: #f03e3e;
  transform: translateZ(-1px);
}

.main-nav-card:hover .rocket {
  display: block;
  animation-name: flyRocket;
  animation-duration: 3s;
}

@keyframes flyRocket {
  from {
    transform: translateY(1000%);
  }
  to {
    transform: translateY(0);
  }
}

.card-title {
  font-size: 3.2rem;
}

.window {
  height: 10px;
  width: 10px;
  background-color: var(--color-primary);
  border-radius: 50%;
  position: relative;
  top: 17px;
  left: 7.5px;
  /* transform: translateX(25%); */
}

<div class="main-nav-card">
  <p class="card-title">Introduction</p>

  <div class="rocket">
    <div class="window"></div>
  </div>
</div>