因为 ::before 默认是行内元素，其边框会像普通文本一样占据空间并撑大父容器。要解决这个问题，需要将其设置为块级或内联块级元素（如 display: block），使其脱离行内流，从而不再影响父盒子的宽度计算。
::before 默认行为如何影响布局
当伪元素未设置 display 属性时，浏览器默认赋予其 inline 值。这意味着它被视为一行文字的一部分，其边框和填充会直接增加所在行的总宽度，进而迫使父容器变宽。
<div class="parent">
<span>Text</span>
</div>
<style>
.parent {
background: #f0f0f0;
/* 初始宽度由内容决定 */
}
.parent::before {
content: "";
border: 5px solid red;
/* 默认 display: inline */
}
</style>运行上述代码，父容器 .parent 的宽度将包含 <span></span> 的宽度加上伪元素的边框宽度。这是因为行内框（Inline Box）在水平方向上会累积所有子项的尺寸。
立即学习“前端免费学习笔记（深入）”；
如何通过 display 属性解决此问题
将伪元素的 display 属性修改为 block 或 inline-block，可以改变其参与布局的方式。块级元素会独占一行，其宽度由自身定义或自动计算，不再与同行其他元素累加，从而避免撑大父容器的宽度。
<style>
.parent::before {
content: "";
border: 5px solid red;
display: block; /* 关键修改 */
width: 0; /* 可选：限制自身宽度 */
height: 0;
}
</style>应用 display: block 后，伪元素虽然仍在文档流中，但它不再作为行内内容的一部分参与水平空间的竞争。如果希望完全消除其对父容器尺寸的影响，还可以配合 position: absolute 将其移出文档流，或者使用 width: 0 和 height: 0 限制其占用的空间。
使用 position: absolute 彻底隔离伪元素
除了修改 display，另一种常见做法是将伪元素设置为绝对定位。这样它会脱离正常的文档流，不再占据任何物理空间，从而完全不影响父容器的宽度计算。
<style>
.parent {
position: relative; /* 建立定位上下文 */
}
.parent::before {
content: "";
border: 5px solid red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>在这种模式下，伪元素覆盖在父容器之上，但其边框和尺寸不再参与父容器的布局计算。父容器的宽度仅由其内部正常流动的内容决定，实现了真正的“不撑大”效果。
