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

没有显示这些行，因为content的{{1}}属性上使用的引号引起了错误。

将.progressbar li:after替换为content:’’，它将起作用。

使用CSS在li之间添加连接线

1 个答案: