為什麼 CSS `:after` 不為圖片和輸入等替換元素添加內容？

CSS :after 不將內容新增至某些元素

CSS :after 屬性用於在文件樹中的元素之後插入內容。但是，它似乎僅適用於特定元素，例如段落 (

) 和表格 (

)，但不適用於圖像 (<img src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="為什麼 CSS `:after` 不為圖片和輸入等替換元素添加內容？" >) 和表單輸入 () 等替換元素。 ).

什麼決定了 :after 和 :before 的可接受性屬性？

:after 和 :before 的行為取決於替換元素功能不同的事實。替換元素是那些外觀和尺寸由外部資源定義的元素，例如圖像、插件和表單元素。

根據 CSS 規範，:before 和 :after 只適用於非替換元素。這意味著它們不能用於在替換元素之前或之後添加內容。

Span 例

考慮以下HTML：

<span>Content of span</span>

使用下列CSS：

span:before {
  content: "Before";
}

span:after {
  content: "After";
}

此場景的M看起來像this:

<span>
  <before>Before</before>
  Content of span
  <after>After</after>
</span>

此結構示範了:before 和 :after 如何在非替換元素之前和之後插入內容。

影像異常

但是，對影像使用:after 不會產生相同的結果結果：

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="為什麼 CSS `:after` 不為圖片和輸入等替換元素添加內容？" >

img:after {
  content: "After";
}

這是因為:after 無法改變被取代元素的外觀。

以上是為什麼 CSS `:after` 不為圖片和輸入等替換元素添加內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！