Добавление соединительных линий между li с помощью css

Question

У меня есть этот готовый степпер с использованием 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; 
    }

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

Как можноЯ соединяю <li> с небольшой линией?

Вот stackblitz .

Answer 1

Строки не появляются, потому что есть ошибка с кавычками, используемыми в свойстве content .progressbar li:after.

Замените content:’’ на content: '', и оно будет работать.