因为原生单选框是替换元素，浏览器禁止通过top/left直接调整其内部图标；所有视觉表现必须由label的伪元素承担，且label需设position: relative以确保::before/::after准确定位。
为什么直接改 input[type="radio"] 的 top/left 没用
因为原生单选框是替换元素，浏览器禁止通过定位属性直接调整其内部图标的偏移。你看到的圆圈和实心点根本不是 input 自身渲染的——它只是个“透明触发器”。所有视觉层都得靠 label 上的伪元素来画，而伪元素的位置必须基于 label 的定位上下文。
label::before 和 label::after 的定位基准怎么设
关键前提是：label 必须有 position: relative，否则 ::before/::after 会向上找最近的定位父级（可能是 body），导致图标漂移或错位。
-
label::before（外圈）建议用top: 0.25em+left: -1.75em对齐文字基线，避免上下浮动 -
label::after（内点）需用position: absolute+top: 2px+left: 2px精确嵌入外圈中心，不能依赖transform: translate(-50%, -50%)，否则在缩放或字体变化时易偏移 - 两个伪元素的
width/height必须一致（如都设为18px），否则left: 2px无法稳定居中
如何让选中圆点始终垂直居中且不被裁剪
单选框的“实心点”常因 border-radius: 50% 和 background 配合不当而溢出外圈，或在高 DPI 屏幕上模糊。根本解法是控制伪元素盒模型本身：
- 外圈（
::before）设box-sizing: border-box，边框计入宽高，避免尺寸计算偏差 - 内点（
::after）不用background，改用content: "●"+font-size: 12px+line-height: 1，字符天然抗锯齿且居中稳定 - 禁用
transform: scale()动画做“放大出现”，它会导致像素对齐抖动；改用opacity+transition: opacity .2s
Bootstrap 场景下 .form-check-label 的偏移为什么总差 2px
Bootstrap 默认给 .form-check-label 加了 padding-left: 1.75rem，而它的伪元素默认以 label 左边缘为原点。如果你没重置这个 padding，left: -1.75em 就会多减一次，造成图标左偏。
- 要么覆盖
.form-check-label { padding-left: 0 }，再手动用margin-left: 1.75rem推开文字 - 要么保持 padding 不变，把伪元素的
left改为0，并确保label的position: relative已生效 - 检查是否漏写了
pointer-events: none在伪元素上——否则鼠标悬停时可能误触发 label 的 hover 样式，干扰定位感知
content: "" 缺失会导致整个元素不渲染，但开发者工具里仍显示“已匹配样式”，容易误判为定位失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
