Why css pseudo element background covered by parent div background color

Question

Trying to create step indicator using css :before :after pseudo element. While the :after pseudo element background is the "bar" between steps. It works ok however if the parent div has colored background it will cover the :after pseudo element and make it not showing. Why? Could be something related to z-index? I trired to set parent div z-index to -2 but it still doesn't work.

.progressbar {
    overflow: hidden;
    color: lightgrey
}

.progressbar .active {
    color: #673AB7
}

.progressbar span {
      min-width: 15vw;  
    float: left;
    position: relative;
}

.progressbar .step1:before {
    content: "1"
}

.progressbar .step2:before {
    content: "2"
}

.progressbar span:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

.progressbar span:after {
    content: '';
    width: 100%;
    height: 10px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 20px;
    z-index: -1
}

.progressbar span.active:before,
.progressbar span.active:after {
    background: #673AB7
}

.bar-container
{
    text-align: center;
    position: relative;
    margin-top: 20px
}

.white-background
{
    background-color: white;
    z-index: -2
}

<div class="white-background">
  <div class="bar-container">
    <div class="progressbar">
      <span class="active step1"><strong>Step1</strong></span>
      <span class="step2"><strong>Step2</strong></span>
    </div>
  </div>
</div>
<!-- without background the :after bar show -->
<div>
  <div class="bar-container">
    <div class="progressbar">
      <span class="active step1"><strong>Step1</strong></span>
      <span class="step2"><strong>Step2</strong></span>
    </div>
  </div>
</div>

This is the codepen