當使用CSS的::before和::after偽元素時，對于<img>標簽，這些偽元素的使用會失效。這是因為<img>標簽是一個自閉合標簽，它并不包含實際的內(nèi)容，因此無法直接在其前后添加額外的內(nèi)容或樣式。
在實際項目中，有時需要在圖片的前后添加一些裝飾性或說明性的內(nèi)容，比如標簽、說明文字等。如圖：
然而，對于<img>標簽，這樣的操作是無效的。
比較常見的解決方法是將<img>標簽放置在一個外部容器內(nèi)，然后對這個容器使用偽元素來添加內(nèi)容和樣式。
接著，在CSS中，對外部容器使用偽元素：
還有一種做法是偽造 content，給 img 這類標簽添加 content 屬性，輸入一些無意義的文本，讓瀏覽器認為標簽含有實際內(nèi)容。
如在 CSS 中添加：
但這種方法可能會存在瀏覽器兼容問題。建議還是使用外部容器法。
上一篇： 偽元素與hover的妙用
開啟了相對路徑模式，本地址是站外域名，不能轉為相對路徑（在關閉開發(fā)者模式后不顯示這句話） "濟南建站手術移動護理系統(tǒng)詳細流程(千佛山醫(yī)院版）")
開啟了相對路徑模式，本地址是站外域名，不能轉為相對路徑（在關閉開發(fā)者模式后不顯示這句話） "濟南建站手術移動護理系統(tǒng)")
開啟了相對路徑模式，本地址是站外域名，不能轉為相對路徑（在關閉開發(fā)者模式后不顯示這句話） "濟南建站紅寶書智慧黨建平臺")
