先看下實現(xiàn)的效果：
代碼如下
//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 很方便的實現(xiàn)了這個效果析二，并且可以兼容到IE8
