在CSS3中，我們可以使用::before和::after這兩個選擇器在元素前面或後面添加內容。這兩個選擇器常和"content屬性"配合使用，使用的場景最多的就是清除浮動和創建小圖標。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 ::before和::after選擇器</title>
<style type="text/css">
div::before
{
content:" 學習網";
}
</style>
</head>
<body>
<div>CSS3教程</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
::before和::after這兩個選擇器都是配合content屬性在元素之前或之後插入內容、圖片、多媒體等。這2個選擇器非常有用，甚至可以用來設計各種小圖標：
上面小圖標就是用::before和::after這兩個選擇器實現的，純CSS喔，感覺很牛逼吧！有機會我們再在CSS3進階教程給大家詳細講解一下。