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 屬性來指定要插入的內容。