Добавление соединительных строк между элементами списка с использованием CSS ⇐ CSS

[Anonymous]

У меня есть готовый степпер с использованием CSS:

Код: Выделить всё

.container {
width:100%;
//margin-top: 100px;
}
.progressbar {
counter-reset: step;
}
.progressbar li{
list-style-type: none;
float: left;
width: 33.33%;
position:relative;
text-align: center;
font-weight: 600;
}
.progressbar li:before {
/* CSS for creating steper block before the li item*/
content:counter(step);
counter-increment: step;
height:30px;
width:30px;
line-height: 30px;
border: 2px solid rgb(54, 52, 52);
display:block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
/* CSS for creating horizontal line*/
content:’’;
position: absolute;
width:100%;
height:2px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content:none;
}
.progressbar li.active {
color:#27ae60;
}
.progressbar li.active:before {
border-color:#27ae60;
}
.progressbar li.active + li:after{
background-color:#27ae60;
}

Я попробовал ответ по этой ссылке, но он не сработал.

Как мне подключить слиты небольшой строкой?

Вот стекблиц.

Подробнее здесь: https://stackoverflow.com/questions/560 ... -using-css