伪元素本身不生成图标，它只是容器；真正决定图标形态的是content值+样式组合。漏写content是90%的“图标不显示”问题根源，必须写content，哪怕为空字符串——没content浏览器就不渲染，样式再全也白搭；content:""用于纯图形，content:"\2714"插入unicode符号，content:url(icon.svg)插入外部svg，content:attr(data-icon)动态读取属性值；display和position需手动配置，如inline-block设宽高、relative/absolute精确定位，vertical-align:middle实现垂直居中。
伪元素本身不生成图标，它只是容器；真正决定图标形态的是 content 值 + 样式组合。漏写 content 是 90% 的“图标不显示”问题根源。
必须写 content，哪怕为空字符串
浏览器对 ::before 和 ::after 的渲染有硬性要求：没 content 就不渲染，样式再全也白搭。
-
content: ""—— 用于纯图形（圆点、对勾、三角等），后续靠background或border构建 -
content: "\2714"—— 插入 Unicode 符号（✅），注意用反斜杠转义、无引号 -
content: url(icon.svg)—— 插入外部 SVG，不能加引号，否则会被当文字内容输出 -
content: attr(data-icon)—— 动态读取 HTML 属性值，适合多状态图标
定位和尺寸控制的关键是 display 和 position
伪元素默认是 inline，无法设宽高、无法绝对定位。想画图标，这两步几乎必做：
- 需要宽高/背景/边框 → 必须设
display: inline-block或block - 要精确定位（比如右上角小红点）→ 父元素加
position: relative，伪元素加position: absolute并配top/right等 - 想和文字垂直居中 → 加
vertical-align: middle（配合inline-block）或transform: translateY(-50%)（配合absolute） - 避免遮挡文字 → 注意
z-index，尤其在hover弹出提示框时
三种常用图形实现方式对比
不同场景下，选错方式会导致维护困难或效果失真：
-
纯色圆点/方块：用
background-color+border-radius最轻量，如background: #e74c3c; border-radius: 50% -
对勾/叉号/箭头：优先用 Unicode（
content: "\2714"），兼容性好、无额外资源；若需颜色/大小独立控制，再考虑 SVG 背景 -
复杂形状（气泡三角、齿轮、警告叹号）：用
border技巧（如单边宽高差造三角）或background-image: url()引入内联 SVG（可缩放、可设background-size） - 慎用字体图标（如 Font Awesome）：需确保
font-family正确加载，且content中的 Unicode 必须匹配字体私有编码（如"\f00c"），调试成本高
容易被忽略的可访问性与兼容性细节
图标不是装饰，而是信息载体。以下几点常被跳过，但直接影响实际体验：
- 仅靠颜色区分状态（如红点=错误、绿点=成功）时，必须补充文字提示或 aria-label，否则色盲用户无法识别
-
content: url()引入的图片图标，在打印样式中默认不显示，需额外加@media print规则 - IE 不支持
content: url(data:image/svg+xml,...)这类 data URL 写法，若需兼容，改用外链 SVG 或降级为 Unicode - 伪元素无法绑定事件，想让图标可点击，得把交互逻辑放在父元素上，再通过
event.target判断是否点中图标区域
最复杂的部分不是画图，而是决定这个图标该承载什么语义、在哪些上下文中必须可见、以及当 CSS 失效时用户是否还能理解它的作用——这些决定了你该用 content 插符号，还是用 background 绘图形，抑或根本该用真实 <svg></svg> 元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
