css - 使用css在li之间添加连接线

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; 
    }

我尝试了来自 this link 的答案, 但它没有用。

如何连接 <li>连同一条小线 ?

这是一个stackblitz .

Answer 1

线条没有出现，因为 .progressbar li:after 的 content 属性上使用的引号有误。

将 content:'' 替换为 content: '' 即可。