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

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

 

 　　假设html代码是这样的

?

1 2 3 4 5 6

<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代码如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.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 属性来指定要插入的内容。