在以下情況下，為什么:after選擇器需要一個content屬性才能起作用？
.test {
width: 20px;
height: 20px;
background: blue;
position:relative;
}
.test:after {
width: 20px;
height: 20px;
background: red;
display: block;
position: absolute;
top: 0px;
left: 20px;
}
<div class="test"></div>
注意，在沒有指定content屬性之前，你看不到偽元素。
.test {
width: 20px;
height: 20px;
background: blue;
position:relative;
}
.test:after {
width: 20px;
height: 20px;
background: red;
display: block;
position: absolute;
top: 0px;
left: 20px;
content:"hi";
}
<div class="test"></div>
為什么這是預(yù)期的功能？你可能會認為display:block會強制元素顯示出來。奇怪的是，你實際上可以在Web調(diào)試工具中看到樣式，但它們不會顯示在頁面上。
2
0
0
以下是對各種W3C規(guī)范和草案的參考：
選擇器 Level 3
:before 和 :after 偽元素
content 屬性
應(yīng)用于 ::before 和 ::after 偽元素的樣式會影響生成內(nèi)容的顯示。content 屬性就是這個生成的內(nèi)容，如果沒有它，就會默認假設(shè) content: none，意味著沒有內(nèi)容可以應(yīng)用樣式。
如果你不想重復(fù)多次使用 content:''，你可以通過在CSS中全局地為所有 ::before 和 ::after 偽元素設(shè)置樣式來覆蓋這一點（JSFiddle 示例）：
::before, ::after {
content:'';
}
為每個::before和/或::after偽元素聲明content: ''的原因是因為content的初始值是normal，這在::before和::after偽元素上計算為none。請參考規(guī)范。
content的初始值不是空字符串而是計算為none的值，原因有兩個：
在每個元素的開頭和結(jié)尾都有空的內(nèi)聯(lián)內(nèi)容是相當愚蠢的。請記住，::before和::after偽元素的最初目的是在源元素的主要內(nèi)容之前和之后插入生成的內(nèi)容。當沒有內(nèi)容可插入時，創(chuàng)建一個額外的盒子來插入空內(nèi)容是沒有意義的。因此，none值告訴瀏覽器不要費心創(chuàng)建額外的盒子。
使用空的::before和::after偽元素來創(chuàng)建僅用于布局美觀的額外盒子的做法是相對較新的，一些純粹主義者甚至可能認為這是一種hack。
在每個元素的開頭和結(jié)尾都有空的內(nèi)聯(lián)內(nèi)容意味著每個（非替換）元素 - 包括html和body - 默認情況下將生成不止一個盒子，而是最多三個盒子（對于已經(jīng)生成多個主要盒子的元素，例如具有列表樣式的元素，可能會生成更多盒子）。你實際上會使用多少個額外的盒子？這可能會使布局的成本增加兩倍，但獲得的收益非常少。
實際上，即使在本十年，頁面上不到10％的元素會需要用于布局的::before和::after偽元素。
因此，這些偽元素是選擇性的 - 因為選擇性退出它們不僅浪費系統(tǒng)資源，而且在考慮到它們的原始目的時純粹是不合邏輯的。出于性能原因，我也不建議使用::before、::after為每個元素生成偽元素。
但你可能會問：為什么不將display屬性在::before、::after上默認為none呢？簡單來說：因為display的初始值不是none，而是inline。將inline計算為none在::before、::after上不是一個選項，因為這樣你將永遠無法以內(nèi)聯(lián)方式顯示它們。將display的初始值設(shè)為none在::before、::after上也不是一個選項，因為一個屬性只能有一個初始值。（這就是為什么content的初始值始終是normal，并且在::before、::after上被定義為計算為none的原因。）
