html - CSS在步进器上隐藏线

我正在尝试仅使用普通CSS来实现步进器，但是我正在努力如何从每一步中删除白线，但我尝试使用z-index却没有成功。我想知道的是，我应该使用CSS3中的哪个属性删除圆上的线，并将其保留在每个圆之间的空间中。

<div class="progress">
  <div class="progress-item">
     <span class="progress-step"/>
  </div>
  <div class="progress-item">
     <span class="progress-step"/>
  </div>
  <div class="progress-item">
     <span class="progress-step"/>
  </div>
  <div class="progress-item">
     <span class="progress-step"/>
  </div>
</div>



.progress {
  position: relative;
  display: inline-flex;
  width: 162px;
  &::after {
    content: '';
    left: 0;
    right: 18px;
    top: 28px;
    height: 1px;
    background: #fff;
    display: flex;
    position: absolute;
  }
}

.progress-item {
  visibility: hidden;
  // align-items: center;
  width: 25%;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  margin-bottom: 16px;
  margin-top: 16px;
}

.progress-step {
  display: flex;
  align-items: center;
  border: 1px solid #fff;
  background-color: #3f7f67;
  border-radius: 50%;
  color: white;
  width: 22px;
  height: 22px;
  justify-content: center;
  // margin-right: 10px;
  box-shadow: 0 0 0 2px #3f7f67;
  z-index: 2;
  font-size: 12px;

  &.active {
    background: #fff;
    color: black;
  }
}

.progress-step::before {
  color: white;
}

.progress-step::after {
  background-color: pink;
}

这里的截图：

最佳答案

你去

   <div class="progress">
    <div class="progress-item">
        <span class="progress-step">1</span>
    </div>
    <div class="progress-item">
        <span class="progress-step">2</span>
    </div>
    <div class="progress-item">
        <span class="progress-step">3</span>
    </div>
    <div class="progress-item">
        <span class="progress-step">4</span>
    </div>
</div>

    .progress {
        position: relative;
        display: inline-flex;
        width: 162px;
    }
    progress::after {
        content: '';
        left: 0;
        right: 18px;
        top: 28px;
        height: 1px;
        background: #fff;
        display: flex;
        position: absolute;
    }

    .progress-item {
        align-items: center;
        width: 25%;
        color: #fff;
        font-size: 16px;
        text-decoration: none;
        margin-bottom: 16px;
        margin-top: 16px;
    }

    .progress-step {
        display: flex;
        align-items: center;
        border: 1px solid #fff;
        background-color: #3f7f67;
        border-radius: 50%;
        color: white;
        width: 22px;
        height: 22px;
        justify-content: center;
        margin-right: 10px;
        box-shadow: 0 0 0 2px #3f7f67;
        z-index: 2;
        font-size: 12px;
    }
    .active {
        background: #fff;
        color: black;
    }

    .progress-step::before {
        color: white;
    }

    .progress-step::after {
        background-color: pink;
    }