為什麼 CSS `:before` 和 `:after` 偽元素不能與 `` 元素一起使用？

偽元素與影像元素：相容性困境

在CSS領域，像:before和:after這樣的偽元素被廣泛使用用於增強網頁上元素的視覺外觀。然而，當涉及到圖像元素（）時，這些偽元素似乎一片空白，引發了一個問題：為什麼它們不能與 img 元素一起使用？

技術解釋

原因在於 CSS 規範本身。官方文件明確指出「本規範沒有完全定義::before 和::after 與替換元素（例如HTML 中的IMG）的交互。」換句話說，目前標準中並未完全規定偽元素應用於替換元素（例如圖像）時的行為。這種歧義為瀏覽器不一致和缺乏支援留下了空間。

目前瀏覽器支援

由於這種未指定的行為，Chrome 和 Firefox 等主要瀏覽器選擇不支援支援 img 元素的偽元素。這意味著即使您精心製作 CSS 以在圖像中包含 :before 或 :after ，效果也不會可見。

可能的解決方案

雖然有目前沒有官方方法強制偽元素與img 元素一起使用，您可以使用一些解決方法探索：

• 將影像包裝在容器元素中：將影像包裝在
  中或元素並將偽元素應用到容器而不是圖像本身。
• 使用CSS濾鏡：使用CSS濾鏡（例如box-shadow或亮度）來實現與偽元素類似的視覺效果。

未來展望

根據 CSS 規範，偽元素與替換元素互動的完整定義將在未來的規範中概述。這可能為將來支持 :before 和 :after 與 img 元素打開大門。然而，在此之前，這些解決方法仍然是為影像尋求類似功能時最實用的方法。