8

z-index doesn't work with its ::before/::after element. Here I'm sharing code below.

.or {
  border: 2px solid #8fc300;
  border-radius: 5px;
  color: #333;
  font-size: 17px;
  font-weight: 600;
  height: 34px;
  line-height: 26px;
  text-align: center;
  width: 34px;
  margin-top: 64px;
  margin-left: 20px;
  margin-right: 20px;
  background: #fff;
  /*For z-index - keep the green area on top*/
  position: relative;
  z-index: 11;
}
.or::after {
  background: red;
  content: "";
  display: block;
  height: 116px;
  margin-left: 15px;
  margin-top: -68px;
  width: 4px;
  /*For z-index - keep the green area on top*/
  position: relative;
  z-index: 9;
}
<div class="or"></div>
Jim Fahad
  • 635
  • 1
  • 8
  • 21

4 Answers4

7

You can remove z-index from parent element and use negative z-index: -1 on pseudo element. If you want only green line on red line you need to remove white background from parent also DEMO

.or {
  border: 2px solid #8fc300;
  border-radius: 5px;
  color: #333;
  font-size: 17px;
  font-weight: 600;
  height: 34px;
  line-height: 26px;
  text-align: center;
  width: 34px;
  margin-top: 64px;
  margin-left: 20px;
  margin-right: 20px;
  background: #fff;
  /*For z-index - keep the green area on top*/
  position: relative;
}
.or::after {
  background: red;
  content: "";
  display: block;
  height: 116px;
  margin-left: 15px;
  margin-top: -68px;
  width: 4px;
  /*For z-index - keep the green area on top*/
  position: absolute;
  z-index: -1;
}
<div class="or"></div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • Here In my scenario, `.or` lives inside a `modal`, so it must should have a `z-index` value, otherwise if i set `z-index: -1` for `or::after`, it goes under the modal. Is there any solution keeping `z-index` with parent `.or` ? – Jim Fahad Sep 14 '16 at 14:43
  • Can you create demo for you problem its hard to tell solution without it. – Nenad Vracar Sep 14 '16 at 15:01
  • Please see here. http://jimfahad.com/onewave/3/game-play.html (click on `create account` button - http://prntscr.com/chyqap ) – Jim Fahad Sep 14 '16 at 15:49
4

Pseudo-elements are treated as descendants of their associated element. Hence .or::after will inherit z-index: 11 from .or.

Just remove z-index from .or and update z-index: -1 on .or::after

.or {
  border: 2px solid #8fc300;
  border-radius: 5px;
  color: #333;
  font-size: 17px;
  font-weight: 600;
  height: 34px;
  line-height: 26px;
  text-align: center;
  width: 34px;
  margin-top: 64px;
  margin-left: 20px;
  margin-right: 20px;
  background: #fff;
  /*For z-index - keep the green area on top*/
  position: relative;
}
.or::after {
  background: red;
  content: "";
  display: block;
  height: 116px;
  margin-left: 15px;
  margin-top: -68px;
  width: 4px;
  /*For z-index - keep the green area on top*/
  position: relative;
  z-index: -1;
}
<div class="or"></div>
Pugazh
  • 9,453
  • 5
  • 33
  • 54
2

Here is a possible solution.

On the .or element, do not set the z-index value and remove the white background (this may not be what you need however).

On the :after pseudo-element, set z-index: -1 and this will cause it to be rendered (painted) under the parent element.

.or {
  border: 6px solid #8fc300;
  border-radius: 5px;
  color: #333;
  font-size: 17px;
  font-weight: 600;
  height: 34px;
  line-height: 26px;
  text-align: center;
  width: 34px;
  margin-top: 64px;
  margin-left: 20px;
  margin-right: 20px;
  /*background: #fff;*/
  /*For z-index - keep the green area on top*/
  position: relative;
  /*z-index: 11;*/
}
.or::after {
  background: red;
  content: "";
  display: block;
  height: 116px;
  margin-left: 15px;
  margin-top: -68px;
  width: 4px;
  /*For z-index - keep the green area on top*/
  position: relative;
  z-index: -1;
}
<div class="or"></div>
Marc Audet
  • 46,011
  • 11
  • 63
  • 83
1

Try this if you want something like that. I did changed the styling for .or class like background-color: transparent removed position, z-index and for .or::after z-index: -11

.or {
  border: 2px solid #8fc300;
  border-radius: 5px;
  color: #333;
  font-size: 17px;
  font-weight: 600;
  height: 34px;
  line-height: 26px;
  text-align: center;
  width: 34px;
  margin-top: 64px;
  margin-left: 20px;
  margin-right: 20px;
  background: transparent;
  /*For z-index - keep the green area on top*/
  /*position: relative;*/
  /*z-index: 11;*/
}
.or::after {
  background: red;
  content: "";
  display: block;
  height: 116px;
  margin-left: 15px;
  margin-top: -68px;
  width: 4px;
  /*For z-index - keep the green area on top*/
  position: relative;
  z-index: -11;
}
<div class="or"></div>
aavrug
  • 1,849
  • 1
  • 12
  • 20