伪元素content属性仅支持字符串、Unicode符号、attr()取值、url()引用外部资源（如SVG），不支持HTML标签、JS执行或本地图片路径；用url()插入SVG时需显式设置宽高并用viewBox保证缩放清晰。
伪元素content属性能插入什么内容
content 属性只在 ::before 和 ::after 伪元素上生效，且必须配合 display: inline（默认）或其它可生成内容的 display 值使用。它不能插入 HTML 标签、不能执行 JS、也不能直接引用本地图片文件路径——只支持字符串、Unicode 字符、attr() 函数取值、url() 引用外部资源（如 SVG 或图标字体文件）。
常见错误是写成：content: "<img src="https://img.php.cn/" alt="CSS如何实现伪元素内容插入_使用content属性添加装饰性图标">" —— 这只会原样输出字符串，不会渲染图片。
实际可用类型包括：
-
content: "✓"：纯文本或 Unicode 符号（如 ✅、→、•） -
content: attr(data-icon)：从元素的data-icon属性取值（比如<button data-icon="save">保存</button>） -
content: url(/icons/arrow-right.svg)：加载外部 SVG 或 PNG（注意路径解析基于 CSS 文件位置） -
content: ""：空字符串也合法，常用于仅靠 background-image 装饰的场景
用content加 SVG 图标时路径和尺寸怎么控制
用 url() 插入 SVG，本质是把该文件当背景图处理，但不走 background-image 流程，所以无法用 background-size 控制缩放，也不能设置 background-position。它的尺寸由伪元素自身宽高 + font-size（对内联内容）隐式影响，容易出现图标被裁切或模糊。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是：
- 优先用
background-image+padding-left替代content: url()，可控性更强 - 如果坚持用
content: url()，需显式设置伪元素尺寸：width: 1em; height: 1em;，并搭配vertical-align: middle对齐文本 - SVG 文件本身建议用
viewBox定义坐标系，避免硬编码width/height，否则缩放易失真 - 不要指望
content: url(./icon.svg)在所有构建工具中都能正确解析——Webpack/Vite 对 CSS 中的相对路径处理逻辑不同，可能需要写成url(/src/assets/icon.svg)或使用别名
content结合attr()动态插图标时的典型坑
很多人想通过 attr(data-icon) 实现“一个 class 适配多种图标”，比如：<i class="icon" data-icon="home"></i>，再用 CSS 匹配不同值。但 content 只接受字符串，无法做条件判断或映射——attr(data-icon) 只是原样输出属性值，不会自动转成对应 Unicode 或图片。
可行但有限的方案是：
- 用
attr(data-icon)输出字符，前提是你的 data 属性值本身就是 Unicode（如data-icon="?"），否则就是显示文字 “home” - 配合 CSS 自定义属性 +
var()做映射（CSS 不支持 if，但现代浏览器支持@property+var()配合content，不过兼容性差，不推荐生产用） - 真正可靠的动态图标方案仍是 JS 控制 class 切换，或用 icon font 的
content: "\e901"方式配合字体文件 - 注意：IE 完全不支持
attr()用于content，哪怕写成content: attr(data-icon) ""也会整个失效
伪元素 content 图标在高 DPI 屏幕下模糊怎么办
用 content: url(icon.png) 插入位图，在 Retina 屏上大概率发虚，因为 CSS 没有提供 @2x 切换机制。这不是 bug，是设计限制。
解决思路很直接：
- 一律改用 SVG：矢量图天生适配任意分辨率，且体积小、可内联（
content: url("data:image/svg+xml;utf8,<svg>...</svg>")） - 如果必须用 PNG，就放弃
content: url()，改用background-image+@media (-webkit-min-device-pixel-ratio: 2)手动切换高清图 - 不要给伪元素设固定像素宽高（如
width: 16px），改用em或rem，让它随父级字号缩放，再配合 SVG viewBox 保持清晰 - 检查 SVG 文件是否含
width/height属性并删掉，只留viewBox，否则可能被强制拉伸
最常被忽略的一点：伪元素的 content 插入内容后，若没设置 font-size，其内部尺寸会受继承影响，导致 SVG 渲染比例异常——哪怕你写了 width: 1em，也要确认父元素的 font-size 是你预期的值。
