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

先看下实现的效果：

代码如下

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

:before