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

关注

原创最新推荐文章于 2026-07-11 00:13:20 发布 340 阅读 AI 写同款· GEO 优化 ›

【信息科学与工程学】计算机科学与自动化——第六十三篇人机交互之前端交互参数知识库02 每个分支下又细分了四个关键方向，并按照“研究对象/焦点、基本问题、核心理论/概念、研究方法、应用/目标、前沿/发展”的框架进行阐述，严格遵循了六级编码体系。在最终整合时，应建立唯一的学科分类编码表（例如，用两位数字或“ART”、“MED”、“ECO”等字母前缀），并确保所有下级编码（尺度、层次、类别、子类、具体项）的逻辑一致性。此回答中的编码为示例，实际系统需据此调整。控制过程（前馈、同期、反馈）、全面质量管理（TQM）、平衡计分卡（BSC）定量（调查、实验）、定性（访谈、民族志）、混合方法、大数据。阅读详情

先看下实现的效果：

这里写图片描述

代码如下

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