根本原因是伪元素默认display: inline，加border后参与盒模型计算且未脱离文档流；须设content: ""、display: block/inline-block、position: absolute，并在父元素上加position: relative，必要时用overflow: hidden裁剪圆角。
伪元素 ::before 加 border 后位置偏移的根本原因
不是 ::before 本身出错，而是边框改变了它的渲染尺寸和定位基准。默认 display: inline 的伪元素在加 border 后，若未显式设 width/height 或未脱离文档流，border 会参与盒模型计算，导致实际占位超出预期——尤其当父元素有 padding 或 line-height 时，视觉偏移更明显。
必须加 position: absolute 且父元素设 position: relative
这是绝大多数偏移问题的直接解法。不设 position: relative 在父元素上，::before 会相对于最近已定位祖先（可能是 body）定位，而非你看到的按钮或列表项。
- 给触发
::before的元素（如button、li）加上position: relative -
::before必须设position: absolute，再用top/left定位 - 避免在父元素上同时用
transform（如scale），它会创建新包含块，干扰top/left计算基准
border 导致圆角失效或“撑方”？加 overflow: hidden
当 ::before 用四边偏移（top: -2px; right: -2px; ...）模拟描边效果时，它会溢出父元素的 border-radius 区域，视觉上让圆角按钮变方——这不是定位错，是裁剪缺失。
- 在父元素（如
button）上加overflow: hidden，强制启用圆角裁剪上下文 - 不要依赖
top/right/bottom/left拉伸伪元素来“模拟边框”，更可控的方式是：显式设width/height+border+transform: scale(0.99)避免 subpixel 模糊 - 若需响应式适配，优先用
inset（如inset: 2px）替代四个方向单独写，语义更清晰
调试时容易忽略的三个硬性前提
很多“怎么调都不对”的情况，其实卡在这三步没做：
立即学习“前端免费学习笔记（深入）”；
-
::before必须有content: ""—— 没这行，其他所有样式都无效 - 要控制宽高或定位，必须改
display：默认inline下width/height/top全部被忽略，至少设display: block或display: inline-block - 如果伪元素含背景图或 SVG，
width和height必须显式声明，否则background-size或缩放行为不可控
transform、百分比单位、line-height 和未重置的默认字体度量时，不同浏览器对同一段 CSS 的像素级解释会出现肉眼可见的偏差——尤其在 Safari 和高 DPI 屏上。 
