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

您需要使用.progressbar li:nth-child(2n)定位其他所有li元素，然后需要将整个伪元素向上移动，然后将线和圆(:before和:after)向下移动。这将是一个很多，如果你没有足够的文字，线条和圆圈所有连接到相同的元素/ pseudoelement容易。

查看代码段：

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 {

position: relative;

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;

}

.btn {

background-color: #55b776;

margin: 5px;

width: 75px;

color: white;

}

.btn:hover {

color: white;

}

.btn:focus {

color: white;

}

.btn-container {

display: flex;

justify-content: center;

width: 100%;

position: absolute;

bottom: 0;

}

body {

background-color: #f7f7f7;

}

.progressbar li:nth-child(2n) {

top: -50px;

}

.progressbar li:nth-child(2n):before {

top: 50px;

}

.progressbar li:nth-child(2n):after {

top: 57px;

}

Simple Step Progress Bar

• Art
• daten
• zeit
• ort
• Pdf
• Bilder
• INFO
• Bezahlen

Next

Back

Reset

以下CSS规则可以解决问题：

.progressbar li:nth-child(2n) {

top: -50px;

}

.progressbar li:nth-child(2n):after {

top: 57px;

}

.progressbar li:nth-child(2n):before {

top: 50px;

}