img::before 在所有现代浏览器中均不生效，因 img 是替换元素，规范禁止生成伪元素匿名框；防闪烁应使用 padding-top 比例占位或 aspect-ratio，并配合 position: relative 与绝对定位图片。
img::before 根本不能用，别试了
直接说结论：img::before 在 Chrome、Firefox、Safari、Edge 所有现代浏览器中均不生效。不是写法不对，是规范禁止——<img> 是替换元素（replaced element），浏览器不为其生成用于插入伪元素的匿名框。DevTools 里该规则会被标为 invalid，样式压根不会解析。所有网上“img::before { content: '⚠' }”的示例，2026 年已全部失效。
真正能防闪烁的是 padding-top 比例占位
图片加载前留白失败，本质是容器高度为 0，等图下来才重排，造成“向下顶”的闪烁。解决路径不是伪元素，而是用 padding-top 提前按宽高比撑开父容器高度：
-
padding-top百分比值基于父容器宽度计算，与图片是否加载无关 - 16:9 图片 →
padding-top: 56.25%；4:3 →75%；1:1 →100% - 必须配合
position: relative和绝对定位的<img>，否则图片无法精准覆盖 - 图片样式缺一不可：
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
漏掉 height: 100% 或没设 position: relative，留白就失效；父容器若含 max-height 或在 flex 容器中未设 flex-shrink: 0，同样会塌陷。
现代方案优先用 aspect-ratio，但要 @supports 隔离
Chrome 88+、Firefox 89+、Safari 15.4+ 支持 aspect-ratio，它比 padding-top 更语义化、更易维护：
立即学习“前端免费学习笔记（深入）”；
- 写法简单：
.img-wrap { aspect-ratio: 16/9; } - 但必须用
@supports (aspect-ratio: 1)包裹，否则旧浏览器会忽略整个规则，而新浏览器若同时存在padding-top和aspect-ratio，会导致高度叠加翻倍 -
position: relative不能删——它是aspect-ratio下object-fit居中的锚点，也是 fallback 方案的定位基础
onerror + 容器背景才是占位图正解
想显示“加载失败”提示，唯一可靠路径是结构分离 + JS 控制状态：
- 用
<div class="img-wrap"><img src="..."></div>结构 - CSS 给
.img-wrap设默认背景（可内联 SVG 占位图）和尺寸 -
<img>上绑定onerror="this.style.display='none'; this.onerror=null;"，防止 fallback 图再 404 导致死循环 - 别用
background-image直接套在<div>上再监听 onerror——CSS 背景不触发 DOM 事件，绑不了
最容易被忽略的是：所有“防闪烁”和“失败占位”逻辑都依赖容器层控制，<img> 本身只负责语义与内容渲染，强行在它身上做文章只会反复踩坑。
