label::before 必须绑定到 label 元素，不能用于 input[type="radio/checkbox"]；content 属性不可缺失或写错；字体图标需严格匹配 font-family 和 font-weight；对齐应使用 vertical-align: middle + inline-block；需禁用原生样式并兼顾可访问性。
label::before 必须绑定到 label，不能写在 input 上
浏览器明确禁止对 input[type="radio"] 或 input[type="checkbox"] 直接使用 ::before —— 无论 CSS 写得多全，Elements 面板里都看不到伪元素节点，页面也完全不渲染。这是规范限制，不是 bug，也不是兼容性问题。
正确做法是把样式写在关联的 label 上，并确保 HTML 中 input 和 label 正确配对：
<input type="radio" id="opt1"><label for="opt1">选项一</label>- 或更简洁的包裹写法：
<label><input type="radio">选项一</label>
只有这样，label::before 才能被浏览器识别并渲染。
content 值写错或缺失，图标就彻底消失
这是最常发生的“什么都没显示”原因：只写了 color、font-size、background，却漏了 content。浏览器会直接忽略整个伪元素规则，连占位都不留。
立即学习“前端免费学习笔记（深入）”；
content 的合法写法包括：
-
content: ""（空字符串，适合纯背景色圆点、SVG 图标等） -
content: "✓"（字面符号，支持中文、箭头、星号） -
content: "\2713"（Unicode 转义，注意是\不是\u） -
content: url(./icons/check.svg)（路径相对于 CSS 文件位置） -
content: attr(data-icon)（读取label元素自身的data-icon属性）
字体图标必须配对 font-family 和 font-weight
用 Font Awesome 等字体图标时，仅写 content: "\f005" 是不够的。font-family 名称必须和 @font-face 中定义的**完全一致**（大小写、空格、引号都不能错），且 font-weight 必须匹配图标风格。
常见错误示例：
-
font-family: "FontAwesome"→ 应为"Font Awesome 6 Free" -
font-weight: 400用于 solid 图标 → 应为900 -
font-family: 'Font Awesome 6 Free'但实际引入的是 Pro 版 → 字体未加载，显示方块
验证方式：打开 DevTools → Elements → 选中 label → 查看 Computed 标签页，确认 font-family 和 font-weight 是否生效。
对齐靠 vertical-align: middle，别硬调 top
label::before 默认是 display: inline，参与文本流，但基线对齐极易偏移。用 top: 2px 或 margin-top 会随字体大小、行高变化而错位。
可靠方案是：
- 加
display: inline-block（否则vertical-align无效） - 加
vertical-align: middle（基于行高居中，稳定） - 若需绝对定位（如右上角小 badge），则先给
label加position: relative，再设label::before { position: absolute; top: 0; right: 0; }
另外，记得关掉原生单选按钮的默认样式：input[type="radio"] { appearance: none; }，否则圆圈和你画的图标会重叠。
真正容易被忽略的是可访问性：伪元素插入的图标不会被屏幕阅读器读出，也不响应事件。如果那个“✓”代表“已选中”，它就得是语义化的状态提示，而不是纯装饰——这时候应该用真实 HTML 元素 + aria-hidden="true" 或 aria-label 显式声明。
