虽然这是很多年前的事了，但我还是想分享一下。

上面的答案是正确的，您可以直接将编码后的svg字符串附加到css content属性中。对于那些与URL有任何问题的人来说，可能是由于空格和字符无效，在这种情况下，将您解码的SVG代码粘贴到: https://mothereff.in/url

使用编码后的SVG URL应该可以正常工作。 错误和正确的例子:

#incorrect::before {
  content: url(
    data:image/svg + xml,
    <svgid="Layer_1"data-name="Layer 1"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 15.37 188.41"><defs><style>.cls-1{fill:#aeadad;}</style></defs><circleclass="cls-1"cx="7.69"cy="7.69"r="7.69"/><rectclass="cls-1"x="6.69"y="27.72"width="2"height="160.69"/></svg>
  );
}

#correct::before {
  content: url(data:image/svg+xml,%0A%3Csvg%20id%3D%22Layer%5f1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.37%20188.41%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23aeadad%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%227.69%22%20cy%3D%227.69%22%20r%3D%227.69%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226.69%22%20y%3D%2227.72%22%20width%3D%222%22%20height%3D%22160.69%22%2F%3E%3C%2Fsvg%3E%0A);
}

您可以添加SVG作为空的:after或:before的背景图像。

给你:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}

我今天刚刚注意到，这里的一家报纸使用SVG直接注入到::before和::after伪元素中，为文章中突出显示的内容呈现程式化的引用。我试图通过whatcms.org找到这篇论文的CMS，但无济于事。然而，我可以说，所有者报纸-一个大型的国家，甚至国际，报纸使用CMS称为DM Polopoly。

在内容元素中输入SVG数据似乎比空白内容并使用SVG作为背景图像要费力得多。我想知道他们为什么选择这种方法——这种方法有什么好处。我在谷歌链接上看到一些人说，在伪元素上悬停时操纵SVG图像很容易…但我没有看到这种“好处”的绝佳例子。

本文提供了一种更简单的插入SVG作为内容的方法。 它使用缩放属性来调整图像的大小。

你可以使用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不包含任何#符号。使用像这样的编码器。

小心其他答案在IE中都有问题。

让我们有这种情况-按钮与前置图标。所有浏览器都能正确地处理这一点，但IE采用元素的宽度并缩放之前的内容以适应它。JSFiddle

#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
    content: url("data:url or /standard/url.svg");
}

解决方案是将size设置为element之前，并将其留在原来的位置:

#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
    content: url("data:url or /standard/url.svg");
    display: inline-block;
    width: 16px; //only one size is alright, IE scales uniformly to fit it
}

background-image + background-size解决方案也可以，但有点不方便，因为您必须指定两次相同的大小。

IE11的结果是:

使用一个空内容的背景蒙版图像，你可以在css中控制颜色:(不要忘记你喜欢的位置，宽度和高度)…!

background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';