Question 42779 in Html Question posted in
Some basic documentation can be found here.

CSS before inherit height from it's element – Html

So I’m trying to build a pop-up block for switching the language on a website.

Due to the design having certain shadows, I need to build the shadow separately from the pop-up block itself. so I wanted to position it under the block using the ::before pseudo-element.

Now I need it to inherit the height from the element i’m using it on. Right now, there are three language options in the block, but I can’t use static height since maybe in the future they will want to add more languages.

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>

The weird part is that it works for the width, giving the ::before element a width of 150px, but not for the height.

Is there a way for the ::before pseudo-element to take it’s height from the initial element?

I tried height: inherit and height: 100%, none of which worked.

Thanks!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution that I found was adding position:absolute to the before element.


  2. 0

    Its working for width because you set element having class language__pop-up l-pop width: 150px but you make height: auto, that why its not working for height.Try to set height in px as you set the width for element having class language__pop-up l-pop

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search