為什麼 CSS :after 不能處理所有 HTML 元素？

CSS :after 行為與元素相容性

CSS :after 屬性擴充文件流中元素之後的內容。然而，並非所有元素似乎都支持這種行為。為什麼 :after 只能作用在某些元素上？

答案：替換元素與非替換元素

根據 CSS 規範，只有非替換元素可以有 :before 和 :after 屬性。替換元素的外觀和尺寸由外部決定，包括圖像、外掛程式和表單控制項等元素。

什麼是替換元素？

替換元素包括：

• 圖片()
• 外掛程式(
• 表單元素（、、<input>、<select>）</select>

為什麼：之前和之後不要使用替換元素

CSS 規範指出，:before 和 :after 與替換元素的交互尚未完全定義。此方面為將來的規範保留。

範例

考慮以下範例：

<span>Content of span</span>

span:before {
  content: "Before ";
}

span:after {
  content: " After";
}

此部分的DOM 結構範例將是：

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

此結構不適用於圖像等替換元素因為它們沒有與非替換元素相同的內容。

因此，CSS :after 屬性只能與非替換元素一起使用，因為它們的外觀由元素內的內容決定本身。

以上是為什麼 CSS :after 不能處理所有 HTML 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！