CSS3的:after偽元素是用來在指定元素的最后一個子元素之后添加一些內(nèi)容。而使用:hover偽類可以使元素在鼠標(biāo)經(jīng)過時發(fā)生一些效果。組合這兩個偽元素/偽類,就可以實現(xiàn)鼠標(biāo)懸停時顯示特定內(nèi)容的效果。
/* CSS代碼 */ p:after { content: "這是在p標(biāo)簽最后添加的內(nèi)容"; } p:hover:after { content: "這是鼠標(biāo)懸停時添加的內(nèi)容"; color: red; }
上面的代碼中,我們先定義了在每個p元素的最后添加一個內(nèi)容(這里只是一個簡單的示例),然后使用:hover偽類在鼠標(biāo)懸停時改變添加的內(nèi)容并將字體顏色改為紅色。
需要注意的是,:hover偽類只有在鼠標(biāo)懸停時才會應(yīng)用,當(dāng)鼠標(biāo)移走后,添加的內(nèi)容也會自動消失。
使用CSS3的:after偽元素和:hover偽類配合使用,可以實現(xiàn)很多有趣的效果,比如在鏈接后面添加提示箭頭、懸停時展示圖片等等。