CSS `:before` 和 `:after` 偽元素可以設定內聯 SVG 的樣式嗎？

使用CSS :before 和:after 偽元素設定內聯SVG 樣式：一個困境

雖然:before 和:after 等CSS 偽元素通常用於樣式化樣式HTML 元素及其在內嵌SVG 上的應用提出了獨特的挑戰。了解替換元素和生成內容的細微差別對於解決此問題至關重要。

內嵌 SVG 作為替換元素

內嵌 SVG 通常被視為 HTML 中的替換元素。替換元素是指以外部物件（例如圖像或影片）取代文字的元素。它們顯示為單一單元，不能包含任何文字節點。

這種區別很重要，因為 CSS 產生的內容（例如 :before 和 :after 偽元素創建的內容）只能應用於內聯元素。內聯元素是那些與周圍文字一起流動的元素，它們可以包含文字節點。

產生的內容和替換的元素

CSS :before 和 :after 偽元素建立產生的內容，其中插入到選擇器匹配的元素中。但是，由於內聯 SVG 是替換元素，因此它們無法附加生成的內容。這是因為內容是添加在元素內部的，而替換的元素不允許嵌套內容。

替代方法

要克服此限制，可以探索替代方法：

• 帶有偽元素的外部SVG： 考慮將SVG作為外部文件載入並使用CSS 來將內容插入到父元素中。
• 包裝元素： 將內聯 SVG 包裝在包含的 div 中，並將偽元素應用於包裝而不是 SVG 本身。

W3C 建議的解決方案：:outside Pseudo-Element

在W3C 中在文件「CSS3 產生和替換的內容模組」中，引入了一個名為:outside 的偽元素。 :outside 允許將產生的內容放置在關聯的替換元素之外，這可能為內嵌 SVG 樣式提供解決方案。但需要注意的是，此功能尚未廣泛實現，並且可能並非所有瀏覽器都支援。

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