偽元素能做什么？
偽元素”，顧名思義。它創建了一個虛假的元素，并插入到目標元素內容之前或之后。
單詞“pseudo”是希臘語的英譯，它的基本意思是“說謊的，不誠實的，錯誤的。”因此叫偽元素是適合的。因為在文檔中它不實際改變什么。相反的，它們是像幽靈一般的元素插入在css中，他們對用戶是可見的，可以通過css控制。
基本語法
:before和:after偽元素編碼非常簡單。例子：
<pre>
.example: before{
content: "#";
}
.example:after{
content: "。";
</pre>
這個例子中提到了兩件事情，第一，我們用.example:before和.example:after來目標鎖定相同的元素.嚴格的說，在代碼中他們是偽元素。
第二，偽元素如果沒有設置“content”屬性，偽元素是無用的。
語法筆記
你可以設置content屬性值為空，并且僅僅把他當作一個內容很少的盒子。像這樣：
<pre>
.example :before{
content: "";
display:block;//默認是inline
width:100px;
height:100px;
background-color:yellow
}</pre>
然而，你不可以完全的移除content屬性，如果你移除了，偽元素將不會起作用。至少，content屬性需要空引用作為它的值(即:content:“”)。
插入內容的特點
插入的內容在頁面的源碼里是不可見的。只能在css里可見
同時，插入的元素在默認情況下是內聯元素
之前和之后是什么？
你的直覺是：before和：after偽元素可能是 插入的內容會被注入到目標元素的前或后注入。但是，正如上面提到的，不是這樣的
注入的內容將是有關聯的目標元素的子元素，但它會被置于這個元素的任何內容的“前”或“后”。
插入非文本內容
我簡要的提醒，你可以把屬性的值置為空字符串或是插入文本內容。你基本上有屬性的值要包含什么的兩個額外的選擇
首先，你可以包含一個指向一個圖像的URL，就像在css里包含一個背景圖像一樣做你能做的
<pre>
p:before {
content: url(image.jpg);
}
</pre>
注意不能使用引號。如果你將URL用引號括起來，那么它會變成一個字符串和插入文本“url(image.jpg)”作為其內容，插入的而不是圖像本身。
一些提醒
偽元素不會出現在DOM中。這些元素不是真正的元素。因此，它們不是可用的。所以，不要使用偽元素生成內容，是您的網頁的可用性和可訪問性的關鍵。
文檔參考自w3cplus.com
