HTML5增加了一系列的偽類選擇器和偽元素選擇器，增加的偽元素選擇器有::before、::after、::first-letter(首字母)、::first-line(首行)、::selection(文檔高亮部分，如鼠標選中文字)、::backdrop(不常用)。前面四者可能比較常用，會聚集到具體某一元素上，后面兩個屬於全局的元素。
這里談一下::before和::after元素的使用。
1、添加元素內容：
<!DOCTYPE html> <html> <head> <title>添加元素內容</title> <meta charset="utf-8" /> <style> p{ padding: 20px;} p:before{content: "我是before添加的內容"; font-weight: bold;} p:after{content: "我是after添加的內容"; font-style: italic} </style> </head> <body> <p>我是元素里面的內容</p> </body> </html>
在這里添加了元素內邊距，判斷before和after的位置是包含在content之中還是之外，結果如下：
我是元素里面的內容
添加一個偽元素十分的簡單，必須設置content屬性，該元素才能展示出來(包括為空"")。並且可以發現偽元素的文字，默認是不能按照文本選擇的。
2、展示列表的hover特效(利用偽元素制作動畫效果)：
<!DOCTYPE html> <html> <head> <title>展示邊框出現效果</title> <meta charset="utf-8" /> <style> .hover>li{ position: relative; float: left; width: 80px; list-style: none; text-align: center; } .hover>li:before{ content: ""; border-bottom: 2px solid #5ac; position: absolute; top: 20px; width: 0; left: 50%; transition: all linear .5s; padding-bottom: 20px; } .hover>li:hover:before{ position: absolute; width: 100%; top: 20px; left: 0; } </style> </head> <body> <ul class="hover"> <li>01組</li> <li>02組</li> <li>03組</li> </ul> </body> </html>
上面的代碼中，content，top及值，width，padding-bottom，transition都是必不可少的，只要有一點偏差就不能達到想要的效果。結果如下：
- 01組
- 02組
- 03組
3、由於這兩個偽類屬於元素的content部分，所以可以用來對元素進行邊框外形的設置：
<!DOCTYPE html> <html> <head> <title>設置邊框樣式</title> <meta charset="utf-8" /> <style> .border{ position: relative; width:150px; height: 36px; border:1px solid black; border-radius:5px; background: #eee; margin-left: 50px; } .border:before,.border:after{ content: ""; display: block; position: absolute; top:8px; width: 0; height: 0; border:6px solid transparent; } .border:before{ left:-11px; border-right-color: #eee; z-index:1 } .border:after { left: -12px; border-right-color: black; z-index: 0 } </style> </head> <body> <div class="border"></div> </body> </html>
通過before和after的定位，利用位置差值和顏色差異，將突出的小角展示出來。結果如下：
利用這兩個偽元素可以很方便的為當前元素設置背景、圖標、動畫效果，而不用在添加額外的元素。