根本原因是伪元素默认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）定位，而非你看到的按钮或列表项。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给触发 ::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 屏上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！