為什麼 `:after` 不為替換元素添加內容？

為什麼 :after 為某些元素添加內容而不向其他元素添加內容？

CSS :after 偽元素旨在之後添加內容元素的文檔樹內容。然而，據觀察，此功能僅對某些元素一致有效。要理解這種行為，我們需要探索替換元素的概念。

根據 CSS 規範，替換元素是指外觀和尺寸由外部資源定義的元素，例如圖片、外掛程式和表單元素。相較之下，非替換元素是那些視覺特徵由 CSS 或瀏覽器預設樣式控制的元素。

重要的是，:before 和 :after 只適用於非替換元素。這意味著圖像、替換的表單控制項和其他替換的元素不能使用這些偽元素來添加內容。

此限制的基本原理是替換的元素通常具有預先定義的大小和外觀，使得在它們之前或之後插入附加內容變得不切實際。相反，替換元素的視覺特徵通常透過其原始程式碼或 CSS 樣式進行控制。

例如，以下HTML 和CSS 會在段落元素之前和之後添加內容，但不適用於圖像:

<p><span>Before</span>Paragraph Content<span>After</span></p>
<img src="image.jpg"/><span>After Image</span>

p:before {
  content: "Before: ";
}

p:after {
  content: " After";
}

img:after {
  content: "After Image";
}

透過理解替換元素的概念，我們可以解釋為什麼:after 適用於特定元素而不適用於其他元素，並且很明顯該行為是有意為之的並且在各個元素之間保持一致瀏覽器。

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