::before和::after伪元素默认为inline，必须设置content属性（如content: ""）才能渲染，且需配合display: block/inline-block或absolute定位才能生效宽高与定位。
::after 和 ::before 伪元素默认是 inline 类型，不参与父容器的宽度计算——哪怕你写了 width: 100%，它也根本不会生效。关键不是“加了没用”，而是它压根没被当成一个能撑尺寸的盒子。
伪元素必须有 content 才会渲染
这是最容易漏掉的一环：content 属性缺失，伪元素就等于不存在。浏览器连布局流程都不会走，更别说撑宽高了。
-
content: ""是最简且安全的写法；content: " "（空格）也能触发，但可能引入不可控空白 - 如果只写
content: none或完全不写，无论 display 设成什么，伪元素都不可见、不占空间 - 某些旧版 Safari 对空字符串支持不稳定，可备选
content: "."+visibility: hidden（但一般没必要）
display: inline-block 不是万能解，反而容易出问题
把伪元素设为 display: inline-block 确实能让宽高生效，但它仍保留在行内流中，会受父元素 font-size、空白符、基线对齐影响，导致位置飘移或宽度意外收缩。
- 父元素若为
inline（如<span></span>），即使子伪元素设了inline-block，其宽度仍受限于父元素“内容宽度”，而非容器可视区 -
inline-block会产生 4px 左右的底部间隙（来自基线对齐），在需要精确贴边的场景下会暴露为“没撑满”假象 - 真正需要横向拉伸时，
display: block+position: absolute+left: 0; right: 0;更可靠，且不依赖父元素 display 类型
父容器本身得有“可参考的宽度上下文”
伪元素的 width: 100% 是相对于父容器的 content box 计算的。如果父容器自己宽度坍缩（比如是浮动、绝对定位、或未设宽的 inline 元素），那 100% 就是 0。
- 常见陷阱：父元素是
float: left且没设width→ 宽度由内容撑开，但伪元素的 100% 参照的是这个动态内容宽，不是视口或布局容器 - 解决方案不是硬塞
width: 100%给父元素，而是让父容器先进入 BFC（如加overflow: hidden）或改用display: flex/grid布局 - 如果父元素是
display: flexitem 且未设flex-basis，伪元素的宽度可能被压缩——此时优先用flex: 1控制父项，而非在伪元素上硬调 width
真正卡住人的往往不是伪元素本身，而是父容器处于一种“看起来有宽度、其实没上下文”的状态。检查父元素是否脱离文档流、是否缺少明确宽度来源、是否被其他样式（如 max-width、transform）间接干扰，比反复调伪元素的 display 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
