使用::befor和::after偽元素在網站中添加圖標
阿新 • • 發佈：2018-07-17
不同 round ont 特殊 dom class code 修飾 utf-8 
css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。
常見偽類——:hover,:link,:active,:target,:not(),:focus。
常見偽元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容。
這些添加不會出現在DOM中，不會改變文檔內容，不可復制，僅僅是在css渲染層加入。
所以不要用:before或:after展示有實際意義的內容，盡量使用它們顯示修飾性內容，例如圖標。
舉例：網站有些聯系電話，希望在它們前加一個icon?，就可以使用:before偽元素，如下：
<!DOCTYPE html> <meta charset="utf-8" /> <style type="text/css"> .phoneNumber::before { content:‘\260E‘; font-size: 15px; } </style> <p class="phoneNumber">12345645654</p>
這些特殊字符的html，js和css的寫法是不同的
使用::befor和::after偽元素在網站中添加圖標