Currently, I am working on creating a pop-up block to enable language switching on a website. The design of the block includes specific shadows that need to be separate from the pop-up block itself. In order to achieve this, I decided to position the shadow under the block using the ::before pseudo-element.
The challenge I'm facing now is making sure that the shadow inherits the height from the element it is applied to. As the block currently contains three language options, I cannot set a static height as more languages may be added in the future.
Here is my code snippet:
.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>Interestingly, the width inheritance for the ::before element works fine at 150px, but the height inheritance does not behave as expected.
Is there a solution where the ::before pseudo-element can effectively inherit its height from the parent element?
I have tried both height: inherit and height: 100%, but neither has yielded the desired outcome.
Thank you!