使用:before 和:after 偽元素設定內聯SVG 元素的樣式是Web 中的常見任務發展。但是，了解對替換元素（包括 SVG）施加的限制非常重要。
在給定的程式碼範例中，套用於 SVG 元素的 :before 樣式未反映出來，表示產生的內容可能不適用於 SVG。
內聯 SVG 是被視為替換元素，這意味著它不是內容流的一部分，而是取代父元素。另一方面，產生的內容是使用 :before 和 :after 等偽元素插入到文檔樹中的內容。
CSS 中產生內容的規範定義在「CSS3 產生並取代內容模組。」根據此文檔，取代元素內不允許產生內容。這解釋了範例中 SVG 上的 :before 樣式失敗的原因。
雖然替換元素中不支援產生的內容，但 W3C 文件引用提出了一個解決方案：:outside 偽元素。此偽元素將產生的內容放置在替換元素之外，有效地繞過了限制。不幸的是，目前對 :outside 的支援是有限的。
由於對替換元素的限制，使用 :before 或 :after 設計內嵌 SVG 樣式是不可能的。若要解決此問題，請探索替代方法，例如使用類別或屬性來動態新增具有所需樣式的元素。
以上是為什麼 CSS `:before` 不能在內聯 SVG 元素上運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
