content属性漏写会导致图标不显示，必须设置且不能为none；字体图标需正确配对font-family和font-weight；响应式应使用em/rem/calc；伪元素图标不可被读屏器识别，关键语义须用HTML实现。
content 属性漏写，图标根本不会出现
这是最常踩的坑：只写了 color、font-size 或 background，却忘了 content。浏览器会直接忽略整个 ::before，哪怕其他样式全对也白搭。
content 必须存在，且不能是 none（那是彻底移除）；空字符串 content: "" 是合法的，适合纯背景或边框类装饰；要显示符号或图标，得用字面值（如 content: "→"）、Unicode 转义（如 content: "\2714"，注意是反斜杠不是 \u）、url() 或 attr()。
- 复制网页上看到的字符（比如 ✅）不可靠——它可能是渲染结果，实际应查字体文档取原始 Unicode
- 用 Font Awesome 时，
content必须写"\f00c"这类码点，不能写"fa-check"类名——伪元素不解析 HTML 或 CSS 类 - 系统 emoji 如
content: "?"虽简单，但 iOS/Android/Windows 渲染效果不一致，慎用于关键 UI
字体图标显示异常：font-family 和 font-weight 必须配对
用 Font Awesome 等字体图标时，font-family 名称必须和 @font-face 中定义的完全一致（大小写、空格、引号都不能错），且 font-weight 必须匹配图标风格：Free 版 solid 图标用 900，regular 图标用 400。
调试时打开开发者工具的 Computed 面板，确认 font-family 生效且无 warning；若图标显示为方块，大概率是字体未加载完成或 family 名拼错。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
font-family: "FontAwesome"→ 正确应为"Font Awesome 6 Free" - 错误示例：
font-weight: 400配 solid 图标 → 应改900 - IE11 不支持
font-display: swap，建议降级用font-display: block或 fallback 到 SVG
响应式尺寸控制：别硬写 px，优先用 em / rem / calc
固定像素会让图标在小屏上过大或挤压文字。用相对单位让图标随文本缩放：font-size: 1.2em 继承父元素字号；width: 1.5em 和 height: 1.5em 保持比例；连接线类场景（如步骤条）可用 calc(100% - 16px) 动态减去圆点半径。
需要精确居中时，vertical-align: middle 比 top: 2px 更可靠——它基于行高对齐，不受字体变化影响；配合 display: inline-block 才能生效。
- 绝对定位图标（如角标）时，宿主元素必须设
position: relative，否则::before会相对于body定位 - 用
margin-right控制图标与文字间距易错位，推荐改用padding-right预留空间 - 小屏下可加
@media (max-width: 768px)把::before设为display: none或改用垂直布局
伪元素图标不可被读屏器识别，关键语义不能只靠它
::before 生成的内容属于纯表现层，NVDA、VoiceOver 等主流读屏软件默认跳过。如果图标承载必要语义（如「必填」星号、「错误」叉号），不能只靠伪元素实现。
正确做法是：用真实 HTML 元素包裹图标（如 <span aria-label="必填">*</span>），或给宿主元素加 aria-label / aria-describedby 关联描述。装饰性图标（如列表前的小圆点）用 ::before 完全合适，但需加 aria-hidden="true" 明确排除。
另外，content: "" 仍会创建匿名文本节点并参与布局——若导致行高异常，可加 line-height: 0; font-size: 0; 压平，或改用 content: none 彻底移除。
