请使用纯CSS实现下图所示的布局效果（手写HTML代码和CSS代码），不考虑兼容性

请使用纯CSS实现下图所示的布局效果（手写HTML代码和CSS代码），不考虑兼容性：

绿色色值是：#00BC9B，灰色色值是：#BCBCBC
注意HTML的语义化、内容的扩展性以及尺寸的自适应性。

<div class="main-box">
 <div class="active item">
    <div class="item-icon">
      <div class="item-icon-2">1</div>
    </div>
    <div class="item-name">第一步</div>
  </div>
  <div class="active item-line"></div>
  <div class="active item">
    <div class="item-icon">
      <div class="item-icon-2">2</div>
    </div>
    <div class="item-name">第二步</div>
  </div>
  <div class="item-line"></div>
  <div class="item">
    <div class="item-icon">
      <div class="item-icon-2">3</div>
    </div>
    <div class="item-name">第三步</div>
  </div>
  <div class="item-line"></div>
  <div class="item">
    <div class="item-icon">
      <div class="item-icon-2">4</div>
    </div>
    <div class="item-name">第四步</div>
  </div>
</div>

.main-box{
  display: flex;
  justify-content: center;
  width: 500px;
}
.item-icon{
  height: 60px;
  width: 60px;
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
}
.item-name{
  width: 64px;
  text-align: center;
  font-weight: 900;
  color: #BCBCBC;
  margin-top: 10px;
}
.item-icon-2{
  height: 64px;
  width: 64px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #BCBCBC;
  border-radius: 50%;
  color: #fff;
  line-height: 64px;
  text-align: center;
}
.item-line{
  width: 30%;
  height: 0px;
  border: 1px solid #BCBCBC;
  transform: translate(0, 32px);
}
.active .item-icon{
  border-color: #00bc9b;
}
.active .item-icon-2{
  background-color: #00BC9B;
  height: 56px;
  width: 56px;
  line-height: 56px;
}
.active .item-name{
  color: #00bc9b;
}
.active{
  border-color: #00bc9b !important;
}

网页效果：

新手上路，非标准答案，请多指教