css中的::after和::before已經被大量地使用在我們日常開發中了，使用他們可以使我們的文檔結構更加簡潔。但是很多人對::after和::before仍不是特別了解，究竟他們是做什么的？如何使用他們？什么時候應該使用他們？筆者總結了一些對偽元素的理解和使用經驗。
一、概念：
1.定義
The css ::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.
從定義我們知道::before和::after匹配一個虛擬元素，主要被用於為當前元素增加裝飾性內容的。他顯示的內容是其自身的“content”屬性，默認是內聯元素。
其實::after和::before被引入css中，最核心的目的，還是為了實現語義化。在我們實際開發時候經常有這樣的經歷，為了實現一些效果，在文檔中創建了一些沒有實際內容的節點，或者加入輔助樣式的文本，如：
<style> ul{ list-style: none; } li{ display: inline; } </style> <nav> <ul> <li>html 5</li> <li>|</li> <li>CSS3</li> <li>|</li> <li>JavaScript</li> </ul> </nav>顯示的時候是這樣子的：
很明顯，例子中的“|”僅是顯示時候用的間隔符，沒有實際的意義，而他所在的li元素僅是為了裝飾才被創建的，本是不應該被創建在文檔內的。那么能不能由樣式（css）去創建出節點把他們代替掉呢？
出於這樣的需求，就誕生了::after和::before，這兩個偽元素相當於是對當前元素的裝潢，他們並不是節點，不會出現在dom樹中，但是在顯示上具備節點的效果。我們使用::after和::before重構一下上邊的代碼：
<style> ul{ list-style: none; } li{ display: inline; } li:not(:last-child)::after{ content: "|"; } </style> <nav> <ul> <li>html 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav>顯示效果沒有變化，但是文檔結構變得清晰了多了。
2.使用
::after和::before的使用很簡單，可以認為其所在元素上存在一前一后的兩個的元素，這兩個元素默認是內聯元素，但我們可以為其增添樣式。::after和::before使用的時候一定要注意，必須設置content，否則這兩個偽元素是無法顯示出來的。而content屬性，會作為這兩個偽元素的內容嵌入他們中。如：
<style> p:before{ content: "H"; p:after{ content: "d"; } </style> <p>ello Worl</p>顯示為完整的Hello World。
::after和::before是虛擬元素，不會影響真正元素的所在文檔的位置，對:first-child或者:last-child這種偽類選擇不會造成影響。
3.操作
::after和::before是虛擬節點，而不是正在的節點，不在documont里面找到對應Node對象，在之前的例子中，我們執行下列js代碼：
console.log( document.querySelector("ul").childNodes)；得到的是一個只有3個節點的NodeList對象，而兩個偽元素並不在對象中。因為::after和::before不是真正的節點，所以我們取不到他們，也不發設置點擊等用戶事件。::after和::before雖然是不能設置事件，但還會捕獲用戶事件，並把事件“冒泡”到偽元素所在的元素上。之所以“冒泡”二字加了引號，是因為他不是真的冒泡，更准確的說::after和::before幫所在元素去捕獲去事件，事件的srcElement對象是偽元素所在的元素，而不是偽元素本身。
document不能獲取到::after和::before所對應的節點對象，但是可以通過css的接口獲取其樣式屬性，如：
window.getComputedStyle( document.querySelector('li'), ':before' )返回是個CSSStyleDeclaration對象，可以獲取當前的style值。
什么是圖片字體？
類似於圖片的字體，在使用過程中，可以對其進行樣式的更改，而圖片有時候的樣式更改需要進行重新設計（變色，傾斜）
東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com
怎么使用圖標字體？
下面給出IcoMoon 具體使用方法
1、打開IcoMoon 網站，點擊IconMoon App。
2、打開后是具體圖標的界面，可以自己添加自己的圖標進行生成，也可以選用他給出的圖標，在默認圖標的下方 會有add Icons From Library 點擊后可以看到更多的圖標供選擇（有免費的有付費的）。
3、點擊Generate Font后會生成 當前選擇的圖標的界面，右下角的Generate Font 也會變成 Download ，也可以進行相關的下載設置（例如：讓其支持ie6/7之類的）。
4、下載完成后 會有以下文件，這些文件都最好保存下來，不要隨意刪掉。
5、接下來給出圖標字體的具體使用方法（也可以自行看使用圖標字體的css文件——style.css的相關內容）
（1）、將字體文件夾復制到項目中並且聲明字體，為什么引入多個文件，因為有些瀏覽器支持的格式不一樣（此處代碼不需要記憶，因為基本上都一樣，直接復制即可）
@font-face { font-family: 'icomoon';/*聲明字體名稱，可自行設置，應用的時候對應即可*/ src: url('fonts/icomoon.eot?lep7lm'); src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?lep7lm') format('truetype'), url('fonts/icomoon.woff?lep7lm') format('woff'), url('fonts/icomoon.svg?lep7lm#icomoon') format('svg'); font-weight: normal; font-style: normal; }（2）、使用字體
.IconMoon { font-family: 'icomoon'; }（3）、具體顯示對應圖標
使用css 偽元素選擇器before 來進行添加
<li><span>在這前面有一個home圖標</span></li> <li><span>在這前面有一個smile2圖標</span></li> <li><span>在這前面有一個tongue2圖標</span></li> <li><span>在這前面有一個sad2圖標</span></li> <li><span>在這前面有一個wink圖標</span></li>對應的css代碼為：
.icon-home:before {/*content的值是對應的圖標代碼*/ content: "\e900"; } .icon-smile2:before { content: "\e9e2"; } .icon-tongue2:before { content: "\e9e4"; } .icon-sad2:before { content: "\e9e6"; }
.icon-wink:before { content: "\e9e7"; }（4）、正如之前所說，這些圖標本質上是字體，所以可以很方便的去改變顏色，大小，產生陰影效果等
具體的代碼如下
6、當我們想要給字體添加新的圖標或者減去一些圖標時，只需再次打開網站，進入到IconMoon App 頁面，然后點擊 Import Icons 將之前我們下載的字體文件目錄下的selection.json 文件，就可以在我們之前選中的基礎上再次進行操作了，用起來非常的方便。