伪元素::before加border后尺寸失控的根源是默认content-box盒模型，border和padding会额外增加宽高；必须显式声明::before, ::after { box-sizing: border-box; }且置于CSS最顶部。
伪元素::before加border后尺寸失控的根源
因为::before默认使用content-box盒模型，border和padding会额外增加宽度/高度，不包含在你写的width或height内。哪怕只加border: 1px，实际渲染就多出2px，而父容器没预留空间，立刻撑破、换行或错位。
为什么box-sizing: border-box没生效？
伪元素不继承父元素的box-sizing，必须显式声明才起作用。只写* { box-sizing: border-box; }是无效的——::before和::after根本不会被这条规则匹配到。
- 正确写法必须包含伪元素：
*::before, *::after { box-sizing: border-box; } - 这条规则要放在所有CSS最顶部，否则被第三方库覆盖
- 即使
content: ""，只要display不是none，盒子就参与布局，border照常累加
常见错误场景与对应解法
比如用::before画装饰边框或分割线时，加了border却发现位置偏移、线条变粗、flex子项收缩异常——这些都不是样式“没写对”，而是盒模型没统一。
- 在flex容器中，
::before设width: 100%可能只占内容宽，改用position: absolute; left: 0; right: 0;更可靠（前提是父容器有position: relative） - 移动端dpr下
border: 1px渲染为2物理像素，视觉变粗，可改用transform: scaleY(0.5)替代 - 用
border做气泡箭头时，若父容器没设position: relative，箭头会相对于body定位，飘到页面左上角
真正该检查的地方，往往不在伪元素本身
很多布局问题最终查下来，是父容器用了flex: 1但没设min-width: 0，导致::before被压缩；或是表单控件（如input）在旧版Safari里对box-sizing支持不全，需要单独声明。DevTools的「Computed」面板里看box-sizing最终值是否为border-box，比反复调样式更直接。
立即学习“前端免费学习笔记（深入）”；
