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