為什麼偽元素不能與 CSS 中的 `` 標籤一起使用？

偽元素和圖像元素：CSS 難題

儘管:before 和:after 在CSS 中具有廣泛的適用性，但它們的影像元素() 的功能仍然是一個令人費解的例外。如下面的程式碼片段所示，向img 元素添加偽元素不會產生預期的結果：

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash">

img:before {
  content: "hello";
}

雖然它與div 和span 等其他元素無縫協作，但所需的效果是應用於img 元素時不存在。

幕後：CSS規範

CSS 規範揭示了這種差異。它明確指出偽元素和替換元素（包括 HTML 中的 img）之間的交互在當前版本中尚未完全定義。這意味著當前規範沒有指定帶有 img 元素的偽元素的行為。

潛在的解決方案：等待標準化

但是，這種情況可能不會無限期地持續下去。該規範建議偽元素和替換元素之間的交互作用將在未來版本中進一步定義。這讓我們期望 img 元素最終將以更全面和一致的方式支援偽元素。

在那之前，希望使用 img 元素實現類似效果的開發人員可能需要考慮替代方法，例如使用 JavaScript 或在 img 周圍創建額外的包裝元素。

以上是為什麼偽元素不能與 CSS 中的 `` 標籤一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！