CSS Pseudo-element not working in React while using relative and absolute positioning

Question

.call-icon{
    height: 10vw;
    width: 10vw;
    box-shadow: white 0 0 5px;
    position: relative;
    
    
}
.call-icon:before{
    content: " ";
    top:0;
    position: absolute;
    height: 12vw;
    width: 12vw;
  
    background-color: red;
    filter: blur(50px);
    
    z-index: -2;
}

The pseudo element is not displaying while using abosolute positioning. I tried without positionings it dosent work either.

rand_program · Accepted Answer · 2022-04-05 15:51:53Z

0

Can you please delete z-index: -2 or set it z-index: 0 or if you going to use z-index for another thing u can change your body element background-color property to background-color: transparent

.container{
  background-color: transparent;
  height: 100vh;
  display:grid;
  place-content: center;
}

.call-icon{
  height: 10vw;
  width: 10vw;
  box-shadow: white 0 0 5px;
  position: relative;
}

.call-icon:before{
  content: " ";
  top:0;
  position: absolute;
  height: 12vw;
  width: 12vw;

  background-color: red;
  filter: blur(50px);
  z-index: -2;
}

<div class="container">
      <div class="call-icon"></div>
</div>

answered Apr 5, 2022 at 15:51

rand_program

1,2561 gold badge4 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Pseudo-element not working in React while using relative and absolute positioning

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related