如何在 CSS ::before 和 ::after 偽元素中嵌入 SVG？

在::before 和::after 偽元素中使用SVG

通常希望將SVG 影像作為內容嵌入到偽元素中: :之前和::之後。雖然純文字版本不起作用，但也有使用 URL() 或內聯資料 URI 的替代解決方案。

使用URL()

第一種方法涉及引用SVG 檔案的URL：

#mydiv::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

使用資料URI

使用資料URI

#mydiv::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

另一個選項是使用資料URI 編碼將SVG 直接編碼到CSS中：此方法可讓您將 SVG 圖片直接嵌入到 CSS 中，使它是獨立的。

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