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