CSS :before 和 :after 偽元素樣式可以內嵌 SVG 嗎？

使用CSS 設計內聯SVG :before 和:after 偽元素

簡介

簡介

SVG 作為替換內容

內聯 SVG 元素被視為替換內容，這意味著它們取代了他們所指的元素。這種行為是所有類似圖像的元素（包括 SVG）所固有的。因此，在替換的元素中不允許產生內容，例如 :before 和 :after 創建的內容。

為什麼 :before 和 :after 使用 SVG 失敗

MDN 文件指出使用 :before 和 :after 建立的元素是「匿名替換元素」。由於替換的內容不能包含生成的內容，這解釋了為什麼將 :before 和 :after 應用於內聯 SVG 無效。

潛在解決方案 - :outside 偽元素

An標題為「CSS3 產生和替換的內容模組」的 CSS 草稿文件中提出了有趣的解決方案。本文檔引入了一個新的偽元素 :outside，它將產生的內容放置在替換元素之外。透過利用 :outside，可以克服 :before 和 :after 與內聯 SVG 一起使用時的限制。

結論而使用CSS 時：通常不支援內聯SVG 上的before 和:after 偽元素，:outside 偽元素提供了一個潛在的解決方案，可以將生成的內容放置在SVG 元素。開發人員在設計 CSS 樣式時應注意內嵌元素和替換元素之間的差異。

以上是CSS :before 和 :after 偽元素樣式可以內嵌 SVG 嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！