Neko Neko - 1 month ago 6
CSS Question

z-index for pseudo element doesn't work

I'm trying to create breadcrumbs but unfortunately z-index doesn't work.I tried higher values as well as overriding with !important. Here's my code:



li.breadcr {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: #0095c4;
margin: 0 3em;
display: inline-block;
color: white;
position: relative;
z-index: 900000;
}
li.breadcr::before {
content: '' !important;
position: absolute !important;
top: .9em !important;
left: -8em !important;
width: 10em !important;
height: .2em !important;
background: #0095c4 !important;
z-index: -1 !important;
}
li.breadcr:first-child::before {
display: none !important;
}
.active {
background: #0095c4;
}
.active ~ li.breadcr {
background: #badae4 !important;
}
.active ~ li.breadcr::before {
background: #badae4 !important;
}
ul.sub {
list-style: none;
}
li.sub02 {
display: inline-block;
font-family: TeX Gyre Heros, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
}

<ul>
<li class="breadcr">1</li>
<li class="active breadcr">2</li>
<li class="breadcr">3</li>
</ul>
<ul class="sub">
<li class="sub02" style="margin-left: 25px;"><b>File or link</b>
</li>
<li class="sub02" style="margin-left: 53px;"><b>Category</b>
</li>
<li class="sub02" style="margin-left: 50px;"><b>Comments</b>
<li>
</ul>





The code worked on separate html page but when I integrated it with new website the lines vanished.What values for z-index would work so the lines are below circles instead above?
Any suggestions are much appreciated.
Many thanks in advance,
Neko

Answer

Use z-index in ul instead of li, and make sure that the ul is not position: static;:

ul {
  position: relative;
  z-index: 900000;
}
li.breadcr {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: #0095c4;
  margin: 0 3em;
  display: inline-block;
  color: white;
  position: relative;
}
li.breadcr::before {
  content: '';
  position: absolute;
  top: .9em;
  left: -8em;
  width: 10em;
  height: .2em;
  background: #0095c4;
  z-index: -1;
}
li.breadcr:first-child::before {
  display: none;
}
.active {
  background: #0095c4;
}
.active ~ li.breadcr {
  background: #badae4;
}
.active ~ li.breadcr::before {
  background: #badae4;
}
ul.sub {
  list-style: none;
}
li.sub02 {
  display: inline-block;
  font-family: TeX Gyre Heros, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
}
<ul class="breadcr">
  <li class="breadcr">1</li>
  <li class="active breadcr">2</li>
  <li class="breadcr">3</li>
</ul>
<ul class="sub">
  <li class="sub02" style="margin-left: 25px;"><b>File or link</b>
  </li>
  <li class="sub02" style="margin-left: 53px;"><b>Category</b>
  </li>
  <li class="sub02" style="margin-left: 50px;"><b>Comments</b>
    <li>
</ul>

Eplanation:

Elements with a z-index can no break trough ancestors with a z-index. i.e. a child with z-index: -100 can not be behind his parent with z-index: 1000.

Note that z-index only work on elements where position is not static (default value).