伪元素::after要撑满父容器，需确保父容器有明确宽度上下文、伪元素设content:""并脱离内联流（如display:block）、宽度参照系清晰，推荐用绝对定位left:0;right:0;拉伸。
伪元素 ::after 默认是 inline 类型，即使设了 width: 100% 也不会生效——因为内联元素的宽高设置被忽略。要让它撑满父容器，关键不是单纯加 display: block 和 width: 100%，而是确保它能“感知”父容器的宽度，这需要满足前提条件。
父容器必须有明确的宽度上下文
如果父元素本身宽度不确定（比如浮动、绝对定位、或未设置宽度的 inline 元素），::after 即使设了 width: 100% 也没法参考。常见情况：
- 父元素是
inline（如span）→ 需先设display: inline-block或block - 父元素是浮动/绝对定位 → 宽度可能坍缩，需手动设定
width或用fit-content/max-content配合 - 父元素是 flex item 且未设
flex-basis→ 可能收缩，建议加flex-shrink: 0或明确min-width
伪元素需脱离内联流并正确计算宽度
仅设 display: block 不够，还要注意：
- 必须声明
content: ""（否则伪元素不渲染） - 推荐用
display: block或display: table（兼容老浏览器），避免用inline-block（会产生间隙） -
width: 100%是相对于父元素的 content box，若父有 padding/border，需配合box-sizing: border-box或用right: 0; left: 0;
更可靠的方式：用绝对定位拉伸
当父容器已设 position: relative，可让伪元素“贴边拉满”，不受内联限制：
立即学习“前端免费学习笔记（深入）”；
position: absolute;-
top: 0; left: 0; right: 0; bottom: 0;（全向拉伸） - 或只拉宽：
top: 0; left: 0; right: 0;+height控制高度
检查是否被其他样式干扰
常见“失效”原因：
- 父元素设置了
overflow: hidden且伪元素溢出（尤其用绝对定位时） - 伪元素有
margin或transform影响布局计算 - CSS 优先级问题：被其他规则覆盖，可用浏览器开发者工具确认最终生效样式
不复杂但容易忽略。核心就三点：父容器宽度可计算、伪元素脱离内联流、宽度参照系清晰。试一遍上面几条，基本就解决了。
