图片加载失败时伪元素不显示，因浏览器不自动重绘伪元素；需通过onerror添加类名并用CSS控制显隐，配合position、宽高和z-index等确保渲染。
图片加载失败时 ::before 和 ::after 为什么没显示
伪元素默认不会在图片加载失败（img 元素进入 error 状态）后自动重绘或触发样式回退。浏览器只对 img 自身的 alt 文本和内置 fallback 有响应，不联动其伪元素。
常见错误现象：img::after { content: "⚠"; color: red; } 在图片 404 时依然不出现——因为伪元素渲染依赖于元素处于“正常渲染流”，而加载失败的 img 可能尺寸坍缩、甚至被部分浏览器视为“不可见容器”，导致伪元素无布局上下文。
- 确保
img有明确宽高（如width/height或aspect-ratio），否则伪元素无处安放 - 给
img设置position: relative，再让伪元素position: absolute定位，避免依赖文档流 - 不要依赖
content仅含纯文本的伪元素做 fallback —— 它无法响应图片错误事件，只是静态存在
用 img 的 onerror 切换 class 控制伪元素显隐
这是最可控、兼容性最好（IE9+）的做法：把“是否出错”这个状态显式暴露为 CSS 类，再用该类控制伪元素内容与样式。
使用场景：需要统一管理 fallback 样式、支持主题切换、或需配合动画/过渡效果。
立即学习“前端免费学习笔记（深入）”；
-
img上绑定onerror="this.classList.add('load-failed')"，注意只加一次（防止重复触发） - CSS 中写
img.load-failed::before { content: "?️"; display: flex; align-items: center; justify-content: center; } - 务必同时设置
img.load-failed { background: #f5f5f5; }，避免纯白底上看不到浅色 emoji 或文字 - 若需隐藏原图占位空白，可加
img.load-failed { visibility: hidden; }，但保留盒模型（不影响布局）
现代方案：用 loading="lazy" + CSS @supports 做渐进增强
当项目已支持较新浏览器，可用 @supports (display: grid) 配合 img:has(:not([src])) 或属性选择器做轻量 fallback，但注意：:has() 目前（2024）在 Safari 中仍需开启实验特性，生产环境慎用。
性能影响：伪元素本身开销极小，但若在大量图片上滥用 content: url(...) 加载备用图，会触发额外 HTTP 请求，反而加重失败风险。
- 优先用 Unicode 图标或 SVG data URL 写进
content，例如content: url("data:image/svg+xml,%3Csvg...%3E"); - 避免在伪元素中用
attr(src)尝试“兜底加载”，它不会重新请求，且属性值为空时渲染为空字符串 - 如果 fallback 需要可点击或带语义，伪元素不合适——应改用真实
div+ JS 动态插入，伪元素无法获得焦点、不被屏幕阅读器识别
检查 DevTools 中伪元素是否真的被渲染
很多问题其实不是逻辑错，而是调试时没看清真实渲染状态：Chrome/Firefox 的 Elements 面板默认不展开伪元素，容易误判“没生效”。
操作步骤：
- 右键图片 → “检查”，选中
img节点 - 在 Styles 面板右上角点三个点 → 勾选 “Show user agent shadow DOM”（非必需）和 “Show pseudo-elements”
- 观察 Computed 面板里是否有
::before的content、display、position计算值；若display: none或content: none，说明规则被覆盖或条件不满足 - 特别注意：若父容器设了
overflow: hidden且伪元素溢出，它会被裁剪——这不是没渲染，是被藏起来了
最容易被忽略的是：伪元素的 z-index 默认为 auto，在无定位上下文中不参与层叠，可能被后续兄弟元素盖住。加个 z-index: 1 常能立刻验证是不是这个问题。
