如果你想在網頁的某些文字前加圖標或者想改變li元素默認的圖標，你會如何做？常見的做法是在文字前再加一個標簽用於存放圖標，引入一個圖標庫（比如Iconfont-阿里巴巴矢量圖標庫）或者一張圖標圖片。
本文價紹一種不用再額外添加html標簽，存粹利用css就能插入或者自作圖標的方式。先了解偽元素：before和：after定義與語法
定義：在被選元素的內容前面（before）和后面（after）插入內容。語法：
p:before{ content:'內容'; } p:after{ content:'內容'; }
給li標簽添加多樣圖標
li前的圖標可以是圓形，方形，橢圓等，可以是空心實心，可以是黑色，綠色，藍色。。。簡單的幾行代碼就能實現：
li:before{ content:''; display:block; width:10px; height:10px; border-radius:10px;/**控制形狀**/ backgroud:#000;/**控制圖標顏色**/ margin-right:10px/**圖標與文字距離**/ }
引入一張圖片圖標，對於特殊的圖標，需要用圖片完成的，同樣可以before插入到頁面中。
p:before{ content:url(iconf.png);/**不可以加“”**/ } 需要注意的是引入圖片是content：后面不能用“”包起來，會被理解字符串做內容插入到頁面中。
瀏覽器的兼容性
- Chrome 2+,
- Firefox 3.5+ (3.0 had partial support),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (with some minor bugs),
- 幾乎所有的移動瀏覽器。
資源網站大全 https://55wd.com 我的007辦公資源網站 https://www.wode007.com
可以看出幾乎是針對高級瀏覽器的一種元素。如果還沒有意識的擯棄ie8以下的開發者這類元素並不適合你。在未來隨着低版本的瀏覽器占的市場份額越來越小，像這類的元素應用將越來越頻繁，以提高開發效率。