Adding connecting lines between list items using CSS

Question

I have this ready made stepper using 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; 
    }

I tried the answer from this link, but it didn't work.

How can I connect the <li>s together with a small line ?

Here is a stackblitz.

Answer 1

The lines are not appearing because there is a mistake with the quotations marks used on the content property of .progressbar li:after.

Replace content:’’ with content: '' and it will work.