不可行——img 是替换元素，不生成匿名框，伪元素被规范忽略；可行方案是用 div 包裹配合 background-image，或用 JS 监听 data-loaded 属性控制伪元素 fallback。
直接在 <img alt="如何使用CSS伪元素实现图片加载失败时的占位图效果？" > 上用 ::before 或 ::after 显示占位图，**不可行**——这是 CSS 规范限制，不是写法问题，所有主流浏览器（Chrome/Firefox/Safari/Edge）均不支持。
为什么 <img alt="如何使用CSS伪元素实现图片加载失败时的占位图效果？" > 不能直接用 ::before
<img alt="如何使用CSS伪元素实现图片加载失败时的占位图效果？" > 是替换元素（replaced element），它不生成用于插入伪元素的匿名框；即使写了 content: ""，浏览器也会忽略该伪元素，开发者工具里对应规则会标为 “invalid” 或根本不出现。这不是兼容性问题，而是规范行为。
常见误判：看到某些旧教程能生效，其实是早期 Chrome 的临时实现，早已移除；当前（2026年）已彻底不可靠。
真正可用的伪元素方案：用 <div> 包裹 + <code>background-image
把图片从语义化 <img alt="如何使用CSS伪元素实现图片加载失败时的占位图效果？" > 换成容器背景图，才能自由使用伪元素做 fallback。关键点如下：
立即学习“前端免费学习笔记（深入）”；
-
<div class="img-bg" style="background-image: url('real.jpg')"></div>—— 图片走 background，而非src - 必须显式设置
background-size: cover或contain，否则 fallback 占位图尺寸错乱 - fallback 颜色或图标用
::before实现，需配合position: relative和z-index控制层级 - 示例结构：
.img-bg { position: relative; width: 200px; height: 150px; background: #f5f5f5 center/cover no-repeat; } .img-bg::before { content: "⚠"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #999; }
保留 <img alt="如何使用CSS伪元素实现图片加载失败时的占位图效果？" > 语义的折中方案：JS 监听 + data- 属性驱动
若必须用 <img alt="如何使用CSS伪元素实现图片加载失败时的占位图效果？" >（例如 SEO、可访问性、打印样式），只能靠 JS 触发状态变更，CSS 响应属性变化：
- 初始 HTML：
<img src="xxx.jpg" alt="封面图" data-loaded="false"> - JS 监听：
img.addEventListener('load', () => img.dataset.loaded = 'true')和error事件（失败时不改值，保持false） - CSS 仅作用于
img[data-loaded="false"]，设display: inline-block+position: relative+::before渲染占位内容 - 注意：
data-loaded="false"必须写在 HTML 中，不能靠 JS 初始化——否则 SSR 或首屏无样式
最容易被忽略的是：伪元素 fallback 的尺寸依赖父容器或自身宽高约束；没有 width/height 或 aspect-ratio，::before 会塌缩成 0×0，什么也看不见。
