css :before选择器实现文字前加小图标

　　今天客户说想在每行文字的前面加个小图标比较好看，如图所示，但又不想在编辑的时候每行都加一个<img src="">代码，如何通过css来统一添加呢？可以用:before伪元素，随ytkah一起来看看

 

 　　假设html代码是这样的

<div class="richtext">
	<p>Free Shipping, Free Tax</p>
	<p>Shipping By Fedex, UPS, usps etc</p>
	<p>2-7 Bussinsee Days Delivery</p>
	<p>2 Years Warranty</p>
</div>

　　那我们定义css代码如下

.richtext p {
    position: relative;
    padding-left: 25px;
}
.richtext p:before {
    position: absolute;
    content: '';
    background: url(//cdn.shopifycdn.net/s/files/1/0603/6314/5428/t/2/assets/tick.svg?v=7750027145936929006);
    left: 0;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}

 

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。