伪元素边框不会撑大盒子——前提是用 position: absolute 定位并设 content: ""，使其脱离文档流；否则默认 display 会占据空间。
伪元素边框会撑大盒子吗
不会——前提是不用 border，改用 ::before 或 ::after 绘制边框，并且设为 position: absolute。只要不参与文档流，就不会影响原有盒模型尺寸。
常见错误是直接给伪元素加 border 却忘了定位，导致它默认以 display: inline 或 block 插入，意外占据空间，甚至触发重排。
- 必须设置
position: absolute（父容器需position: relative） - 伪元素宽高要显式设为
100%，否则边框可能只画在左上角一小块 - 别漏掉
content: ""，否则伪元素根本不会渲染
怎么写一个不占空间的 ::before 边框
核心是把伪元素当成“贴图层”盖在原元素上，而不是新插入一块内容。下面是最简可靠写法：
.box {
position: relative;
width: 200px;
height: 100px;
background: #f0f0f0;
}
.box::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 2px solid #333;
pointer-events: none; /* 避免遮挡点击 */
}注意：top/right/bottom/left: 0 比 width: 100%; height: 100% 更稳，能绕过某些浏览器对百分比高度的计算偏差。
立即学习“前端免费学习笔记（深入）”；
- 如果原元素有
border-radius，记得也加到伪元素上，否则边框是直角 - 想加阴影？用
box-shadow而非outline，后者不支持圆角裁剪 - 不要用
transform: scale()模拟边框，缩放会模糊、且在高DPI屏上出问题
为什么有时候伪元素边框还是错位
错位通常不是 CSS 写错了，而是父容器的 box-sizing 或 transform 干扰了绝对定位的参考系。
- 父元素用了
transform（比如scale(0.9)），会导致position: absolute的伪元素按变换后坐标系计算位置 - 父元素
box-sizing: border-box本身没问题，但若同时设了padding，而伪元素又没减去它，就会向内偏移 - 滚动容器里用
position: absolute，伪元素会相对于最近的定位祖先，不是视口——容易误以为“固定不住”
验证方法：打开 DevTools，选中伪元素，看 computed 中的 offsetTop / offsetLeft 是否符合预期。
border-box 下用伪元素边框有必要吗
有，而且很常见——比如需要双色边框、渐变边框、或边框带动画但不想触发 layout。
原生 border 是单层绘制，无法单独控制某一边的线型或颜色变化；而伪元素可以独立控制每一侧，甚至用 clip-path 切出虚线缺口。
- 纯 CSS 渐变边框只能靠伪元素 +
background-image实现 - hover 时让边框从左向右滑入？用
transform: scaleX(0)+origin控制，不影响布局 - 移动端要注意：部分老安卓 WebView 对
::before的pointer-events: none支持不稳定，可加z-index: -1备用
真正容易被忽略的是：伪元素边框在打印样式表（@media print）里默认不显示，需要显式重置 display 或 visibility。
