z-index of pseudo element issues

Question

I am having an issue getting my pseudo element to go behind its parent element. I need the red box to go in front of the blue box.

#mobile-nav-icon {
  position: absolute;
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
  z-index: 2;
}

#mobile-nav-icon:before {
  content: '';
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
  position: absolute;
  z-index: -1;
}

<div id="mobile-nav-icon">
  <p>menu</p>
</div>

The result is weird, the text goes in front of the pseudo element but the background of the parent does not.

Any ideas?

jsfiddle

Possible duplicate of [Is it possible to set the stacking order of pseudo-elements below their parent element?](https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e) — disinfor, Jul 11 '17 at 20:48
Just remove the `z-index:2` from the parent... https://jsfiddle.net/muzx11fb/ — Paulie_D, Jul 11 '17 at 20:54

score 2 · Answer 1 · answered Jul 11 '17 at 21:00

Erase the z-index of the first rule:

#mobile-nav-icon {
  position: absolute;
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
}

#mobile-nav-icon:before {
  content: '';
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
  position: absolute;
  z-index: -1;
}

<div id="mobile-nav-icon">
  <p>menu</p>
</div>

score 1 · Answer 2 · answered Jul 11 '17 at 20:47

Try using :before and :after at the same time.

#mobile-nav-icon {
  position: absolute;
}
#mobile-nav-icon:after {
  position: absolute;
  content: '';
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
  z-index: 2;
}

#mobile-nav-icon:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
}

<div id="mobile-nav-icon">
  <p>menu</p>
</div>

z-index of pseudo element issues

2 Answers2