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

本文介绍如何通过CSS的伪元素:before来为列表项添加图标，实现美观的列表显示效果，并确保兼容到IE8浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下实现的效果：

这里写图片描述

代码如下

//html 
<ul>
    <li class="cur">
        <span>【已扫描待审查】 操作人：张三</span>
        <p>操作时间：2017-06-16  10:39:57</p>
    </li>
    <li>
        <span>【已扫描待审查】 操作人：李四</span>
        <p>操作时间：2017-06-16  10:39:57</p>
    </li>
    <li>
        <span>【已扫描待审查】 操作人：王五</span>
        <p>操作时间：2017-06-16  10:39:57</p>
    </li>
    <li>
        <span>【已扫描待审查】 操作人：赵六</span>
        <p>操作时间：2017-06-16  10:39:57</p>
    </li>
    <li>
        <span>【已扫描待审查】 操作人：赵六</span>
        <p>操作时间：2017-06-16  10:39:57</p>
    </li>
</ul>

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