纯css实现步骤图原理

通过伪代码说明原理，具体样式就不写了

<ul>

   <!--父级 relative 定位-->

   <li class="step">

       <!--步骤图圆圈-->

       <i class="step-icon"><i>

        <!--步骤图连线，absolute定位，top调整到圆圈位置，height：100%-->

       <i class="step-line"><i>

  </li>

  <li class="step">

      <i class="step-icon"><i>

      <!--最后一个通过last-child隐藏-->

       <i class="step-line"><i>

  </li>

</ul>

注：步骤图连线通过height：100%实现长度与内容等高，通过调整top位置，使起点在步骤图圆圈位置