Absolute positioned ::before element ignores z-index stacking

Question

I am creating a very simple navbar and I want hover transitions on the links. I would like to add ::before elements in each link to smoothly transition a different color background on hover. The problem is (as far as I am concerned) that those ::before elements ignore their z-index staking and they hide the link text behind.

I would link to know if I am trying to do something impossible or there is actually a solution I am unable to find.

ul.menu-principal>li {
  display: inline-block;
}

ul.menu-principal>li>a {
  color: #000;
  display: block;
  text-transform: uppercase;
  padding: 10px;
  position: relative;
  z-index: 96;
}

ul.menu-principal>li>a::before {
  content: '';
  position: absolute;
  z-index: 95;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: orange;
  transition: all .2s linear;
}

ul.menu-principal>li>a:hover::before {
  height: 100%;
}

ul.menu-principal>li:hover a {
  color: #fff;
}

<ul class="menu-principal">
  <li><a href="#">Item-01</a></li>
  <li><a href="#">Item-01</a></li>
  <li><a href="#">Item-01</a></li>
  <li><a href="#">Item-01</a></li>
</ul>

Website http://canfosses.mastercamping.com

Thank you all for the responses.

Answer 1

You can just use for your case z-index: -1:

ul.menu-principal>li {
  display: inline-block;
}

ul.menu-principal>li>a {
  color: #000;
  display: block;
  text-transform: uppercase;
  padding: 10px;
  position: relative;
  z-index: 96;
}

ul.menu-principal>li>a::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: orange;
  transition: all .2s linear;
}

ul.menu-principal>li>a:hover::before {
  height: 100%;
}

ul.menu-principal>li:hover a {
  color: #fff;
}

<ul class="menu-principal">
  <li><a href="#">Item-01</a></li>
  <li><a href="#">Item-01</a></li>
  <li><a href="#">Item-01</a></li>
  <li><a href="#">Item-01</a></li>
</ul>