Using symbols in SVG formats对我来说似乎是一个好主意，所以你只能加载一个SVG文件，并将其用作一种spritemap。
虽然我觉得错误，直接在我的html图标中加入<svg></svg>标签，因为它们只是演示文稿，应该添加到我的CSS中。
有没有办法在我的CSS中的:after伪元素中添加svg中的符号？
答案 0 :(得分：5)
您可以通过这种方式引用CSS中的片段（片段必须具有要识别的ID）：
.element {
background-image: url('vector.svg#fragment');
}
您还可以通过使用viewBox剪切它来显示特定区域：
.element {
background-image: url('vector.svg#fragment(viewBox(0,0,25,25))');
}
在这里，您可以阅读有关此方法的更多信息： http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/
另一种方法可能是以图标字体创建所有符号。
答案 1 :(得分：0)
正如Blazemonger在评论中提到的那样，您可以将其放在content元素的after内。
但如果您将其设置为background的{{1}}，您可以更好地控制after，size以及任何其他属性背景图片可以有
HTML
positionCSS
<div id = "mydiv"><div>
您可以将svg另存为单独的文件，并将其#mydiv{
width:500px;
height:100px;
background:tomato;
}
#mydiv:after{
content:"After of #mydiv";
width:500px;
height:100px;
background:url('http://xn--dahlstrm-t4a.net/tmp/sharp-icons/svg-icon.svg') no-repeat;
position:absolute;
top:200px;
border:solid 1px tomato;
}
作为url
DEMO
详细了解如何将SVG添加到页面here
答案 2 :(得分：-2)