如何将::before伪元素置于其父元素后方实现阴影效果？

问题分析 #

你遇到的问题主要来自两个点：

1. 父元素.hero__cont-image的bg-dark类大概率设置了不透明背景，直接遮挡了后方的伪元素；
2. 伪元素未设置定位偏移，位置可能偏离父元素导致无法被看到。

修改后的CSS代码 #

.hero__cont-image {
  position: relative;
  transform: rotate(0);
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(-50vw + 50%);
  border-radius: 0px 300px 300px 0px;
  /* 移除或覆盖bg-dark的不透明背景，让伪元素可见 */
  background-color: transparent;
}

.hero__cont-image::before {
  content: "";
  background-color: blue;
  position: absolute;
  width: 125%;
  height: 125%;
  z-index: -1;
  /* 让伪元素相对于父元素居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 可选：添加模糊效果模拟阴影 */
  filter: blur(12px);
}

关键修改说明 #

• 透明父元素背景：如果bg-dark类的背景必须保留，可以将伪元素绑定到父元素的父节点上，或者调整父元素的堆叠层级，但最简单的方式是让当前父元素背景透明，确保伪元素能透过显示。
• 居中定位伪元素：通过top:50%、left:50%和transform: translate(-50%,-50%)让伪元素完全覆盖父元素区域，避免位置偏移导致效果失效。
• 堆叠上下文注意：父元素的transform属性会创建独立的堆叠上下文，此时伪元素的z-index:-1只会在该上下文内生效，只要父元素背景透明，就能正常显示在父元素后方。

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