CSS 在从它的元素继承高度之前

Question

所以我正在尝试构建一个弹出块来切换网站上的语言。

由于设计有一定的阴影，我需要将阴影与弹出块本身分开构建。所以我想使用 ::before 伪元素将它定位在块下。

现在我需要它从我正在使用它的元素继承高度。现在，块中有三种语言选项，但我不能使用静态高度，因为也许将来他们会想要添加更多语言。

这是我的代码片段：

.l-pop {
  width: 150px;
  height: auto;
  position: absolute;
  bottom: -80px;
  background: #FFFFFF;
  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: 3;
  padding: 8px 5px;
  display: flex;
  flex-direction: column;
}

.l-pop::before {
  content: '';
  width: inherit;
  height: inherit;
  /* height: 100% */
}

<div class="language__pop-up l-pop">
  <div class="l-pop__item">
    <img src="" alt="">
    <p></p>
  </div>
  <div class="l-pop__item">
    <img src="" alt="">
    <p></p>
  </div>
  <div class="l-pop__item">
    <img src="" alt="">
    <p></p>
  </div>
</div>

奇怪的是它适用于宽度，使 ::before 元素的宽度为 150px，但不适用于高度。

有没有办法让 ::before 伪元素从初始元素获取它的高度？

我尝试了 height: inherit 和 height: 100%，都没有用。

谢谢！

Answer 1

它适用于宽度，因为您设置了具有类

language__pop-up l-pop

宽度的元素：150px但是您设置了高度：自动，这就是为什么它不适用于高度。尝试在为具有类

language__pop-up l-pop

的元素设置宽度时以px为单位设置高度

Answer 2

我找到的解决方案是将位置添加到 before 元素。