z-index not work on pseudo element in relation to following element

Question

I am trying to make an absolute positioned psuedo element appear underneath the following element (not the parent). However, changing the z-index to negative does nothing.

Here is the js fiddle:

#containerA {
  position: relative;
  z-index: 4;
}

#containerB {
  z-index: 100;
}

.quote-marks {
  position: absolute;
  z-index: 1;
  font-size: 15em;
  color: yellow;
  background-color: red;
}

.left-quote-marks::before {
  content: "\201C";
}

.authors {
  cursor: pointer;
  font-weight: bold;
}

<section id="containerA">
  <span class="left-quote-marks quote-marks"></span>

  <div id="quote">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."


  </div>

  <span class="right-quote-marks quote-marks"></span>

</section>

<section id="containerB">
  <div class="authors"> Author </div>
</section>

Answer 1

#quote {
 z-index: 2;
 position: relative;
}

Just add z-index with position: relative to fix the issue.