站長資訊網(wǎng)
在css中，偽對象就是給元素追加一個(gè)虛擬標(biāo)簽，由css加載可以節(jié)省html的資源開銷，默認(rèn)是行元素并可以進(jìn)行轉(zhuǎn)換，語法為“元素::偽對象{content:"…";}”；偽對象樣式中必須要有content屬性，否則偽對象無效。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
css中的偽對象是什么
概念：就是給元素追加一個(gè)虛擬標(biāo)簽，由css加載，可以節(jié)省html的資源開銷，必須有content屬性，默認(rèn)是行元素，可以進(jìn)行轉(zhuǎn)換。
::after:在指定的標(biāo)簽后面添加一個(gè)對象
::before:在指定的標(biāo)簽前面添加一個(gè)對象
content：元素里面的內(nèi)容（內(nèi)容中不能寫標(biāo)簽）
語法：
元素::after{ content:""; }
注意：偽對象樣式中，必須有content屬性，否則偽對象無效
多學(xué)一招：官方推薦使用雙冒號，但是通常為了兼容性更好，我們使用單冒號
上面兩個(gè)偽對象選擇器需要結(jié)合屬性content一起使用
<style type="text/css"> .box{width:200px;background:#f00;height:300px;} .box::before{ content:'開頭的內(nèi)容';height:100px; line-height:100px;color:#fff;background:#00f; } .box::after{ content:'這是一個(gè)段落'; background-color:green; display:block;height:50px; } </style> </head> <body> <div class="box"></div>
效果圖
（學(xué)習(xí)視頻分享：css視頻教程）
