CODEWITHSUNDEEP
css
Jim Fahad
Jim Fahad

Reputation: 635

z-index doesn't work with ::after/::before element?

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>

Upvotes: 8

Views: 13038

Answers (4)

aavrug
aavrug

Reputation: 1889

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>

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46795

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>

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122087

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>

Upvotes: 8

Pugazh
Pugazh

Reputation: 9561

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>

Upvotes: 4

Related Questions