content属性不能直接插入图片，因其仅支持字符串、attr()、counter()及有限url()，且url()方式无法设置尺寸、定位等样式；应使用background-image配合display和宽高控制伪元素图片。
不能直接用伪元素的 content 插入图片，但可以通过 background-image 在伪元素上显示图片——这是最常用且兼容性好的做法。
为什么 content 不能直接插入图片？
::before 和 ::after 伪元素的 content 属性只接受字符串、属性值（attr()）、计数器（counter()）或 url()（仅限于内联替换内容，如图标字体或 SVG data URL，但不推荐用于常规图片）。
虽然 content: url("icon.png") 在部分浏览器中能显示图片，但它有严重限制：
- 无法设置尺寸、背景定位、重复方式等样式
- 不能响应式缩放或添加阴影/圆角等效果
- 在某些浏览器（如旧版 Safari）中表现不稳定
用 background-image 实现更灵活的图片展示
给伪元素设置 display: block（或 inline-block），再配合 width/height 和 background-image，就能完全控制图片样式：
立即学习“前端免费学习笔记（深入）”；
.box::before {
content: ""; /* 必须保留，否则伪元素不渲染 */
display: inline-block;
width: 24px;
height: 24px;
background-image: url("icon-star.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}这样你可以自由调整大小、对齐、缩放模式，甚至叠加渐变或边框。
常见实用技巧
-
响应式图标：用
background-size: 100% 100%或cover配合容器宽高自适应 - SVG 图标优化：优先使用内联 SVG 或 base64 data URL，避免额外请求
-
替代文字兼容性：伪元素无语义，若图标有含义，建议配合
aria-hidden="true"或用真实元素替代 -
避免布局塌陷：伪元素默认是
inline，记得设display并明确宽高，否则可能不显示
什么时候该用真实元素代替伪元素？
当图片需要：
- 被屏幕阅读器识别（如装饰性以外的图标）
- 响应交互（hover/focus 动画需切换不同图片）
- 参与文档流或需要复杂定位（比如浮动、绝对定位偏移量依赖父容器内容）
这时建议用 role="img" 的 ，而非伪元素。
