css - 有没有办法在伪元素::之前或之后使用 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 属性解决方案更可取。

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 URL encoder设置您自己的 SVG 格式，如此处所示。