复选框未选中时无法直接对input添加::before伪元素，需用label包裹并隐藏原生控件，再通过input:not(:checked)+span::before控制自定义图标显示。
复选框未选中时用 ::before 显示自定义图标
直接给 <input type="checkbox"> 添加 ::before 是无效的——表单控件本身不支持伪元素。必须用标签包裹 + 隐藏原生控件 + 用相邻元素模拟视觉效果。
必须用 label 包裹 input 并隐藏原生 checkbox
核心思路是：把 <input> 移到 <label> 内部，用 CSS 把它 opacity: 0 或 position: absolute; left: -9999px 隐藏，再对 label::before 做样式控制。
常见错误是只写 input:not(:checked)::before，这根本不会渲染，浏览器会忽略。
正确结构和基础样式如下：
立即学习“前端免费学习笔记（深入）”；
label {
position: relative;
padding-left: 24px;
cursor: pointer;
}
label input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 1px solid #999;
background-color: #fff;
}
label input:not(:checked) + span::before {
content: "○";
font-size: 14px;
line-height: 16px;
color: #aaa;
}
:not(:checked) 必须作用在 input 上，再通过兄弟选择器影响 label 内容
因为伪元素只能加在可渲染的元素上（如 label 或 span），所以得靠 input:not(:checked) 的状态，驱动其后紧邻的可渲染元素（比如 span）显示图标。
关键点：
-
input和目标元素之间必须是「相邻兄弟」关系（+）或「通用兄弟」关系（~） - 如果用
label::before，就得把input放在label开头，再用input:not(:checked) + label::before——但这样 HTML 结构反直觉，不推荐 - 更稳妥的是在
label里放input+span，然后写input:not(:checked) + span::before
用字体图标或 SVG 替代纯字符更可控
用 content: "○" 看似简单，但字号、垂直居中、抗锯齿都难调；建议用 background-image 或内联 SVG。
例如用 SVG 作为未选中图标：
input:not(:checked) + span::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23aaa' stroke-width='1.5'/%3E%3C/svg%3E");
background-size: contain;
margin-right: 6px;
vertical-align: middle;
}
注意 URL 中的特殊字符（如 #、、<code>>）必须 URI 编码，否则解析失败；Chrome 对 data URL 长度敏感，超长可能回退为默认方框。
真正容易被忽略的是：表单提交时，只有 input 的 name 和 value 起作用，所有伪元素和 span 都不影响数据逻辑——这点别搞混了。
