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

用影像元素解決偽元素的功能

為了增強功能，這個問題探討了為什麼像:before 和:before 這樣的偽元素:after 不與圖像() 元素交互，就像與其他標籤（例如div 和span）交互一樣。為了說明問題，請考慮以下 HTML 和 CSS：

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

img:before {
  content: "hello";
}

在 Chrome 13 和 Firefox 6 等瀏覽器中檢查此程式碼時，很明顯圖片元素沒有發生預期的變更。這種行為與 div 和 span 元素表現出的兼容性形成鮮明對比。

深入研究規範，我們會遇到以下摘錄：

Note. This specification does not fully define the interaction of ::before and ::after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

此語句表明偽元素之間的交互定義不完整和圖像元素，暗示它們當前不相容。對於此事的進一步了解，請參閱本平台的另一個回應。

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