CODEWITHSUNDEEP
csscss-selectorspseudo-element
loximose
loximose

Reputation: 11

Css / Pseudo element ::before behind his container not work

I try to do something but it's not working at all. That looks pretty simple, i desire to add a :before to an element with a background, but each time i do that, the ::before goes in front of the container.

    .container{
     position:relative;
     z-index:1;
     background:blue;
     border:1 px solid white;
   }

   .container::before{
      position:absolute;
      content:"";
      z-index:-1;
      top:-10px;
      left:-10px;
      width:calc(100% + 20px);
      height:calc(100% + 20px);
      background:red;
   }

Upvotes: 0

Views: 2465

Answers (1)

Alexis Wollseifen
Alexis Wollseifen

Reputation: 471

Simply remove the z-index:1 property from the .container

body {
 background-color: #eee;
}

.container{
 position:relative;
 background:blue;
 border:1 px solid white;

 width: 200px;
 height: 200px;
}

.container::before{
  position:absolute;
  content:"";
  z-index:-1;
  top:-10px;
  left:-10px;
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  background:red;
}
<body>

  <div class="container"></div>

</body>

Upvotes: 2

Related Questions