为什么css伪元素背景被父div背景色覆盖

Question

尝试使用 css :before :after 伪元素创建步骤指示器。而 :after 伪元素背景是步骤之间的“栏”。它可以正常工作，但是如果父 div 具有彩色背景，它将覆盖 :after 伪元素并使其不显示。为什么？可能与z-index有关吗？我试图将父 div z-index 设置为 -2，但它仍然不起作用。

.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>

这是codepen