如何在CSS伪元素中使用SVG图标实现矢量图形渲染？-css教程-PHP中文网

content: url() 在伪元素中不可靠，因浏览器支持弱、无固有尺寸、路径解析错位、无法响应css变量；推荐 background-image + content: "" 方案或内联 svg。

如何在css伪元素中使用svg图标实现矢量图形渲染？

直接用 content: url() 往 ::before 或 ::after 里塞 SVG 文件，大概率会空白、拉伸、或上线后 404——这不是写法错，而是这个语法本身就不适合 SVG。

为什么 `content: url()` 在伪元素中几乎不可靠

浏览器对 content: url() 加载 SVG 的支持极弱：不解析 <use></use>、忽略内联 <style></style>、静默丢弃外部引用（比如 href 指向的符号），连控制台都不报错。更关键的是，伪元素默认没有固有尺寸，而 SVG 又依赖 viewBox 和显式宽高来渲染——没设 width/height，它就塌成 0×0。

路径解析基于 CSS 文件位置，不是 HTML 位置；开发时相对路径能跑，上线走 CDN 就 404
无法响应 currentColor、CSS 变量或 fill 控制，改色只能靠 SVG 内联写死
移动端某些 WebView（如旧版 UC）直接不渲染 content: url() 中的 SVG

`background-image` + `content: ""` 是最稳的伪元素 SVG 方案

把 SVG 当背景图塞进伪元素，兼容性好（IE9+）、尺寸可控、缩放自由，是当前工程中最务实的选择。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须写 content: "" 触发伪元素生成，否则 background-image 不生效
显式设 display: inline-block（不能只靠 font-size 撑开）
width 和 height 要写具体值（如 16px），不能留空或设为 auto
推荐用 Data URI 写法，避免路径和 CORS 问题；fill 颜色需 URL 编码（如 %23007acc 代替 #007acc）

li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23007acc' d='M8 0c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-1 12l-4-4 1.41-1.41L6.83 9.17l7.59-7.59L16 0l-9 9z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px;
}