當(dāng)使用CSS的::before和::after偽元素時(shí)，對于<img>標(biāo)簽，這些偽元素的使用會(huì)失效。這是因?yàn)?lt;img>標(biāo)簽是一個(gè)自閉合標(biāo)簽，它并不包含實(shí)際的內(nèi)容，因此無法直接在其前后添加額外的內(nèi)容或樣式。
在實(shí)際項(xiàng)目中，有時(shí)需要在圖片的前后添加一些裝飾性或說明性的內(nèi)容，比如標(biāo)簽、說明文字等。如圖：
然而，對于<img>標(biāo)簽，這樣的操作是無效的。
比較常見的解決方法是將<img>標(biāo)簽放置在一個(gè)外部容器內(nèi)，然后對這個(gè)容器使用偽元素來添加內(nèi)容和樣式。
接著，在CSS中，對外部容器使用偽元素：
還有一種做法是偽造 content，給 img 這類標(biāo)簽添加 content 屬性，輸入一些無意義的文本，讓瀏覽器認(rèn)為標(biāo)簽含有實(shí)際內(nèi)容。
如在 CSS 中添加：
但這種方法可能會(huì)存在瀏覽器兼容問題。建議還是使用外部容器法。
上一篇： 偽元素與hover的妙用
