.progressbar{
    counter-reset:step;
}

.progressbar li {
    list-style-type:none;
    float:left;
    width:25%;
    position:relative;
    text-align:center;
}

.progressbar li:before{
    content: counter(step);
    counter-increment:step;
    width:30px;
    height:30px;
    line-height:30px;
    border:1px solid #ddd;
    display: block;
    text-align:center;
    margin:0 auto 10px auto;
    border-radius:50%;
    background-color:white;
}

.progressbar li:after{
    content:'';
    position:absolute;
    width:100%;
    height:1px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressbar li:first-child:after{
    content:none;
}

.progressbar li.active {
    color: var(--color-background);
}

.progressbar li.active:before {
    border-color: var(--color-background);
}

.progressbar li.active + li.after {
    background-color: var(--color-background);
}