CSS скрыть линию на степпере

Question

Я пытаюсь реализовать степпер только с простым 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;
}

вот скриншот:

Answer 1

Вот как я это сделал:

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

и css:

    .progress {
    position: relative;
    display: inline-flex;
}

.progress:after {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    background: #c00;
    content: "";
    width: 100%;
    display: block;
}

.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: 0;
    font-size: 12px;
}

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

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

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

Answer 2

Вот, пожалуйста,

   <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;
    }