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