padding-top + % 高度比 ::after 更简单可靠，因它直接利用 padding-top 百分比基于父宽计算的特性撑出固定比例（如16:9为56.25%），配合 position: relative 和绝对定位子元素即可安全填满；而 ::after 需多层嵌套、语义缺失且易引发 z-index 冲突，仅在需独立控制背景、蒙版或错位图层时才必要。
直接用 padding-top 奇技淫巧比 ::after 更简单可靠；::after 仅在需独立控制背景缩放、叠加遮罩或错位图层时才值得引入。
为什么 padding-top + % 高度比 ::after 更适合固定比例占位
响应式固定比例容器（如 16:9、4:3）的核心是让高度随宽度等比变化。padding-top 百分比值基于父容器宽度计算，天然支持这一行为——只要设 padding-top: 56.25%（16:9），再配合 height: 0 和 position: relative，内部内容就能用 position: absolute 安全定位。
而用 ::after 实现同样效果，必须：
- 给父容器设
position: relative - 给
::after设content: ""+position: absolute+top: 0; left: 0; width: 100%; height: 0; padding-top: 56.25% - 再额外加一层
position: absolute子元素去装真实内容
多一层 DOM 语义缺失、多一层定位嵌套、多一个 z-index 冲突风险。除非你明确需要伪元素承载独立背景或蒙版，否则纯占位场景下它只是绕远路。
立即学习“前端免费学习笔记（深入）”；
::after 实现固定比例占位的最小可行写法
若仍需用 ::after（例如要叠加渐变蒙版或错位背景图），关键不是让它“撑高”，而是让它作为视觉层存在，高度由父容器提供：
- 父容器必须有明确高度来源（不能只靠子项内容撑开）
-
::after不负责定义比例，只负责渲染装饰层：设width: 100%; height: 100%，再用background-size: cover控制图像缩放 - 若父容器本身无高度，可用
::before或另一个::after做透明占位：设content: ""; display: block; padding-top: 56.25%（此时它不参与视觉，但强制撑起父容器）
示例结构：
div.aspect-ratio-16x9 {
position: relative;
width: 100%;
}
div.aspect-ratio-16x9::before {
content: "";
display: block;
padding-top: 56.25%; /* 撑高父容器 */
}
div.aspect-ratio-16x9::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url(cover.jpg);
background-size: cover;
background-position: center;
}容易踩的坑：background-size: cover 在 ::after 上的行为
background-size: cover 在 ::after 上生效，但它参照的是伪元素自身的尺寸——而该尺寸又完全依赖于父容器的宽高。如果父容器高度塌陷或由内容撑开，cover 就会失准。
- 不要指望
::after { height: 100% }能自动适配比例，它只继承父容器当前计算出的高度，不是按宽高比推导的 - 避免在
::after上同时设padding-top和height: 100%，二者冲突会导致渲染不可控 - 移动端字体缩放可能影响行高，间接干扰
padding-top占位精度；统一设font-size: 16px可减少浮动
真正需要 ::after 的固定比例场景有哪些
当你要把「比例占位」「背景图像」「内容居中」三者解耦时，::after 才体现价值：
- 卡片容器固定 16:9 占位，但背景图需独立缩放（比如局部聚焦），而文字始终居中——此时
::after承载背景，position: absolute子元素装文字 - 视频封面加半透明渐变蒙版，蒙版需随容器等比缩放且不遮挡点击区域——
::after设background: linear-gradient()，z-index独立控制 - 图标按钮需维持正方形比例，但图标本身是 SVG，需居中且不拉伸——用
::after占位，::before插入 SVG 并transform: translate(-50%, -50%)
这些都不是单纯“占个位置”的问题，而是多层视觉逻辑分离的需求。一旦混淆目的，::after 就从工具变成负担。
