在<li>个不同的CSS样式属性中给第二个元素

Question

我尝试为表单创建一个逐步进度栏，但我希望进度栏的圆点上方每隔一个第二个“文本框”，以便在浏览器窗口变小。

有没有简单的方法可以做到这一点？

片段显示了运行中的进度栏。

var progressBar = {

  Bar : $('#progress-bar'),

  Reset : function(){

    if (this.Bar){

   //   this.Bar.find('li').addClass('active'); 

    }

  },

  Next: function(){

    $('#progress-bar li:not(.active):first').addClass('active');

  },

  Back: function(){

    $('#progress-bar li.active:last').removeClass('active');

  }

}

progressBar.Reset();

////

$("#Next").on('click', function(){

  progressBar.Next();

})

$("#Back").on('click', function(){

  progressBar.Back();

})

$("#Reset").on('click', function(){

  progressBar.Reset();

})

  .progressbar {

      margin: 50px 0 50px 0;

      counter-reset: step;

  }

  .progressbar li {

    width: 12.5%;

      list-style-type: none;

      float: left;

      font-size: 12px;

      position: relative;

      text-align: center;

      text-transform: uppercase;

      color: #555555;

  }

  .progressbar li:before {

      width: 15px;

      height: 15px;

      content: '';

      line-height: 30px;

      border: 2px solid #555555;

      background-color: #555555;

      display: block;

      text-align: center;

      margin: 0 auto 10px auto;

      border-radius: 50%;

      transition: all .8s;

  }

  .progressbar li:after {

      width: 100%;

      height: 2px;

      content: '';

      position: absolute;

      background-color: #555555;

      top: 7px;

      left: -50%;

      z-index: -1;

      transition: all .8s;

  }

  .progressbar li:first-child:after {

      content: none;

  }

  .progressbar li.active:before {

      border-color: #55b776;

      background-color: #55b776;

      transition: all .8s;

  }

  .progressbar li.active:after {

      background-color: #55b776;

      transition: all .8s;

  }