CSS伪元素背景不显示，z-index调整后主背景丢失问题求助

我想要复刻一个带有彩色阴影的线性渐变边框效果，但当前代码遇到了问题：

• 未给.projects添加z-index: 0时，伪元素的动画渐变边框和阴影完全不显示，仅能看到.projects的主背景
• 添加z-index: 0后，伪元素的渐变效果显示了，但.projects的主背景却丢失了

我的代码 #

CSS（含Sass变量） #

// 补充定义未声明的Sass变量
$jet: #262626;
$blue: #00bfff;

.container {
  background: $jet;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "Inconsolata", monospace;
}

.rightSide {
  color: white;
  font-size: 1.25em;
  font-family: "Inconsolata", monospace;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 2 1;
}

.projects {
color: white;
font-size: 1.25em;
font-family: "Inconsolata", monospace;
box-sizing: border-box;
width: 18rem;
position: relative;
padding: 1rem 2rem;
margin: auto;
background: linear-gradient(0deg, #000, #262626);
}

.projects h2 {
  font-size: 1.5em;
    text-align: center;
    margin-bottom: 0.75em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid white;
}

.projects ul {
  padding-inline: 0;
  margin-block: 0;
 
}

.projects ul li {
  list-style: "▶" outside none;
  padding-left: 0.5em;
}

.projects ul li > a {
  color: $blue;
  text-decoration: none;
}

.projects ul li > a:hover {
  text-decoration: underline;
}

.projects ul li:nth-of-type(n+11) {
  display: none;
}

.projects ul li:not(:last-child) {
  margin-bottom: 0.75em;
}

.projects::before,
.projects:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  background: linear-gradient(
    45deg,
    #fb0094,
    #0000ff,
    #ff0000,
    #fb0094,
    #0000ff,
    #ff0000
  );
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: animate 60s linear infinite;
}

.projects:after {
  filter: blur(20px);
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 300% 0;
  }
  100% {
    background-position: 0 0;
  }
}

HTML #

<div class="container">
  <h1 class="name">Temp</h1>
  <div class="rightSide">
    <div class="projects">
      <h2>Projects</h2>
      <ul>
        <li><a aria-current="page" class="" href="/">Project 1</a></li>
        <li><a aria-current="page" class="" href="/">Project 2</a></li>
        <li><a aria-current="page" class="" href="/">Project 3</a></li>
      </ul>
    </div>
  </div>
</div>

效果对比 #

• 预期效果：
• 未添加z-index: 0时的效果：
• 添加z-index: 0时的效果：

解决方案 #

问题核心在于.projects的背景覆盖了伪元素，同时堆叠上下文层级冲突。只需修改.projects的CSS，添加两行代码即可解决：

.projects {
  // 原有代码保持不变，新增以下两行
  background-clip: content-box; // 让背景仅覆盖内容区域，padding区域透明
  z-index: 1; // 创建堆叠上下文，确保伪元素在当前元素后方显示
}

另外，需要补充定义代码中使用的Sass变量（$jet和$blue），否则相关背景和文字颜色会失效。

内容的提问来源于stack exchange，提问作者actuallyatiger