如何让CSS ::before伪元素继承父元素高度？

当父元素设置height: auto（高度由内容撑开）时，直接使用height: inherit或height: 100%无法让伪元素继承父元素高度——这是因为这两个属性要求父元素有明确的高度值，而auto属于动态计算的高度，不属于明确值范畴。结合你的语言切换弹窗场景（需用伪元素单独实现阴影），推荐以下两种可行方案：

方案1：绝对定位铺满父元素（推荐） #

你的父元素已经设置了position: absolute，属于定位元素，伪元素可以通过绝对定位贴合父元素边界，自动匹配父元素的动态高度：

修改后的CSS代码 #

.l-pop {
  width: 150px;
  height: auto;
  position: absolute;
  bottom: -80px;
  background: #FFFFFF;
  border-radius: 6px;
  z-index: 3;
  padding: 8px 5px;
  display: flex;
  flex-direction: column;
  /* 移除原父元素的box-shadow，移到伪元素中 */
}

.l-pop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: inherit;
  /* 实现设计要求的阴影效果 */
  box-shadow: 0px 4px 80px rgba(0, 0, 0, 0.07), 0px 1.67px 33.42px rgba(0, 0, 0, 0.0503), 0px 0.89px 17.87px rgba(0, 0, 0, 0.0417), 0px 0.5px 10.02px rgba(0, 0, 0, 0.035), 0px 0.27px 5.32px rgba(0, 0, 0, 0.0283), 0px 0.11px 2.21px rgba(0, 0, 0, 0.0197);
  border-radius: 6px;
  z-index: -1; /* 将伪元素置于父元素内容下方，避免遮挡语言选项 */
}

原理说明 #

绝对定位的元素若同时设置top: 0; left: 0; right: 0; bottom: 0，且父元素为非static定位（你的父元素是absolute，符合要求），则会自动拉伸以填满父元素的整个空间，完美适配父元素由内容撑开的动态高度。

方案2：利用Flex布局特性适配高度 #

借助父元素的flex布局，将伪元素转为flex子元素，通过flex属性让它占满父元素高度：

修改后的CSS代码 #

.l-pop {
  width: 150px;
  height: auto;
  position: absolute;
  bottom: -80px;
  background: #FFFFFF;
  border-radius: 6px;
  z-index: 3;
  padding: 8px 5px;
  display: flex;
  flex-direction: column;
  /* 移除原父元素的box-shadow */
}

.l-pop::before {
  content: '';
  width: inherit;
  flex: 1; /* 让伪元素占满父元素垂直方向的所有空间 */
  order: -1; /* 将伪元素置于所有子元素之前，避免影响语言选项布局 */
  margin: -8px -5px; /* 抵消父元素的padding，保证阴影覆盖整个弹窗区域 */
  box-shadow: 0px 4px 80px rgba(0, 0, 0, 0.07), 0px 1.67px 33.42px rgba(0, 0, 0, 0.0503), 0px 0.89px 17.87px rgba(0, 0, 0, 0.0417), 0px 0.5px 10.02px rgba(0, 0, 0, 0.035), 0px 0.27px 5.32px rgba(0, 0, 0, 0.0283), 0px 0.11px 2.21px rgba(0, 0, 0, 0.0197);
  border-radius: 6px;
}

注意事项 #

此方案中伪元素会作为flex流的一部分存在，需要通过order调整位置，并利用负margin抵消父元素的padding，确保阴影覆盖整个弹窗区域。相对方案1，此方法对布局的影响稍大，仅在无法使用绝对定位时考虑。

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