纯 css 实现步骤图

html：

<ul>

          <li><span className='circle'>1</span><span className='step'>Step1</span></li>

          <li><i className='line'></i></li>

          <li><span className='circle circle_active'>2</span><span className='step'>Step2</span></li>

          <li><i className='line'></i></li>

          <li><span className='circle'>3</span><span className='step'>Step3</span></li>

        </ul>

css:

ul{

  display: flex;

  justify-content: space-between;

}

ul>li:nth-child(odd){

  width: 50px;

  margin: 0 10px;

  list-style: none;

  display:flex;

  align-it