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

使用CSS :before 和:after 設定內聯SVG 樣式

使用CSS :before 和:after 偽元素設定內聯SVG 元素的樣式事實證明這是一個挑戰。儘管它有潛力增強 SVG 的視覺效果，但由於 SVG 作為替換元素的性質，這種方法面臨著局限性。

:before 和 :after 偽元素主要用於在元素內產生內容，導致匿名替換元素。但是，SVG 已經被取代元素，因此很難使用產生的內容注入附加內容。

提供的範例 (http://jsfiddle.net/wD56Q/) 示範了使用 :before 定義的樣式的問題無法影響 SVG。這是因為 SVG 與圖像一樣，無法包含生成的內容。它們被認為是原子的，不會受到改變其內部內容的 CSS 屬性的影響。

為了克服這個限制，人們可以探索像 CSS :outside 這樣的實驗性解決方案，這是一種偽元素，它將產生的內容放置在被替換元素之外而不是在裡面。然而，這種方法仍在開發中，可能不會得到廣泛支持。

總之，目前不支援使用 CSS :before 和 :after 直接設定內聯 SVG 元素的樣式。由於 SVG 是替換元素，因此它們不能包含生成的內容。其他方法，例如 CSS :outside，可能會在未來提供潛在的解決方案，但它們的採用仍不確定。

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