content属性必须写，否则图标根本不会出现；缺失、为none或语法错误（如u2713而非\2713）会导致伪元素被浏览器静默忽略；需配对display与vertical-align以确保对齐，且伪元素内容不可访问，仅适用于装饰性场景。
content 属性必须写，否则图标根本不会出现
浏览器对 ::before 的处理非常严格：只要 content 缺失、值为 none 或语法错误（比如写成 u2713 而不是 \2713），整个伪元素会被静默忽略——Elements 面板里都看不到节点，更别说渲染了。
-
content: ""：适合纯背景色小圆点、SVG 图标等需要尺寸控制的场景 -
content: "✓"或content: "\2713"：插入 Unicode 字符，注意反斜杠转义，不能漏引号 -
content: url("icon.svg")：路径以 CSS 文件位置为基准，不是 HTML 页面；SVG 若含外部引用或内联样式，可能静默失败 -
content: attr(data-icon)：只读宿主元素自身的data-icon属性值，写成attr("data-icon")会失效
display 和 vertical-align 不配好，图标就悬空或挤占文字
::before 默认是 display: inline，无法设 width/height，vertical-align 行为也不稳定。光调 font-size 或 top 像素偏移，换字体或缩放后立刻错位。
- 想当图标用，基本都要改成
display: inline-block或display: block - 文字行内对齐优先用
vertical-align: middle，它基于行高，比top: 2px更可靠 - 要做绝对定位（比如贴左/右），宿主元素（如
li或a）必须先设position: relative，否则伪元素会相对于body飘走 - 列表项前加图标，得先关掉原生
list-style，否则和你插的图标重叠
字体图标和 SVG 图标的写法差异很大
字体图标（如 Font Awesome）和 SVG 图标在 content 中的使用逻辑完全不同，混用容易出方块或空白。
- 字体图标必须配对
font-family和font-weight："Font Awesome 6 Free"+900才能显示 solid 图标；写成"FontAwesome"或漏掉font-weight就是方框 -
content: url()插入 SVG 时，伪元素本身无固有尺寸，必须显式设width/height和display: inline-block，否则塌陷为 0×0 - 更推荐用
background-image+content: ""方案：可控制background-size、background-position，还能 URL encode 颜色（如fill='%23007acc'）
伪元素图标不可访问，别用在关键语义上
::before 插入的内容不在 DOM 中，屏幕阅读器看不见，document.querySelector 找不到，也不能直接绑定事件。这不是兼容性问题，是规范设计如此。
- 装饰性图标（如分隔线、小圆点、箭头）完全合适
- 功能性图标（如「必填」星号、「错误」叉号、「成功」勾）必须用真实 HTML 元素，再补
aria-label或aria-hidden="true" - 用系统 emoji（如
✅）做关键标识？iOS 和 Windows 渲染效果可能完全不同，别依赖
真正难的不是写出几行 CSS，而是判断这个图标到底算“装饰”还是“语义”——后者永远绕不开真实 DOM 节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
