伪元素的box-sizing不继承父元素设置，必须显式声明才生效；即使content为空，只要display非none，其padding/border仍按content-box计算，易导致尺寸溢出或定位偏移。
伪元素生成的内容默认不响应 box-sizing
伪元素 ::before 和 ::after 插入的内容（哪怕只是空字符串）会创建一个匿名的、不可见但占布局空间的盒子，这个盒子的尺寸计算完全独立于父元素的 box-sizing 设置——父元素设了 box-sizing: border-box，对伪元素内部的 width、height、padding、border 无任何影响。
给伪元素显式设置 box-sizing: border-box 才有效
必须在伪元素选择器里单独声明 box-sizing: border-box，否则它的 width + padding + border 仍按 content-box 模式累加，容易撑破容器或导致定位偏移。
常见错误现象：
- 设置了
width: 100%和padding: 10px的::before，实际宽度变成100% + 20px - 用伪元素做装饰边框时，
border加上后整体尺寸失控，和预期位置对不上
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
.card::before {
content: "";
display: block;
width: 100%;
padding: 8px;
border: 2px solid #333;
box-sizing: border-box; /* 必须加这一行 */
}content 为空字符串时也要小心尺寸
即使 content: ""，只要伪元素有 display 值（如 block、inline-block），它就参与盒模型计算。此时若没设 box-sizing，又加了 padding 或 border，就会悄悄增加高度/宽度。
使用场景包括：
- 用伪元素模拟下划线（
border-bottom）但不想影响行高 - 用
::after清除浮动却意外多出几像素空白 - 图标字体前的装饰点（
content: "•"）配合内边距后位置漂移
兼容性与性能注意点
box-sizing 在伪元素上 IE9+ 支持良好，但旧版 Safari（≤5.1）不支持伪元素上的 box-sizing，如果需兼容，得改用 calc() 手动减去 padding/border，或者避免在伪元素上设 padding/border。
性能方面：伪元素本身开销极小，但若大量使用带 box-sizing 的伪元素做视觉装饰（比如列表项每项都用 ::before 画圆点+边框），建议确认是否真需要独立盒模型控制——有时直接用背景图或 SVG 更轻量。
真正容易被忽略的是：伪元素的盒模型是“自包含”的，它的 box-sizing 不继承、不传播、不联动，每一处都要手动写全。
