利用伪元素:before实现的快递单查询垂直列表的demo

先看下实现的效果：

代码如下

//html 

    

        【已扫描待审查】 操作人：张三
        
操作时间：2017-06-16  10:39:57
    
    

        【已扫描待审查】 操作人：李四
        
操作时间：2017-06-16  10:39:57
    
    

        【已扫描待审查】 操作人：王五
        
操作时间：2017-06-16  10:39:57
    
    

        【已扫描待审查】 操作人：赵六
        
操作时间：2017-06-16  10:39:57
    
    

        【已扫描待审查】 操作人：赵六
        
操作时间：2017-06-16  10:39:57
    


// css
ul li {
        list-style: none;
    }
    ul {
        border-left: 1px solid #8a8a8a;
        padding-left: 16px;
        margin-left: 52px;
        margin-top: 20px;
        padding-bottom: 1px;
    }
    li {
        position: relative;
        margin-bottom: 20px;
    }
    li:before {
        content: url(images/dott.png);
        position: absolute;
        left: -21px;
        top: -3px;
    }
    li.cur:before {
        content: url(images/gou.png);
        position: absolute;
        left: -24px;
        top: -1px;
    }
    li img {
        position: absolute;
        left: -21px;
        top: 5px;
    }
    li span {
        font-size: 16px;
        color: #333;
    }
    li p {
        font-size: 14px;
        color: #666;
        margin-top: 8px;
        padding-left: 5px;
    }
    .cur img {
        left: -24px;
        top: 0px;
    }
    .cur span {
        color: #498fdf;
    }

其中利用了伪元素 :before 很方便的实现了这个效果，并且可以兼容到IE8