有没有办法在伪元素 ::before 或 ::after 中使用 SVG 作为内容

Question

我想使用 ::before 将 SVG 图像放在一些选定元素之前：

 #mydiv::before {
  content: '<svg ... code here</svg>';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

上面的代码只显示明文。

我检查了规范，似乎对 content 有一些限制。 CSS content 属性解决方案是可取的。

原文由 Sunny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的你可以！刚刚测试过，效果很好，太棒了！

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

或者，如果您更喜欢将 SVG 直接放在 CSS 中：

 #test::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' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E ");
  width: 200px;
  height: 200px;
}

 <div id="test"></div>

用于格式化您自己的 SVG 的 SVG URL 编码器，如此处所示。

原文由 dezman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 url() CSS 函数。

 #mydiv::before {
  content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

确保您的 SVG 不包含任何 # 符号。使用像 这样 的编码器。

原文由 Jenny 发布，翻译遵循 CC BY-SA 4.0 许可协议