img 元素上 :after 伪元素不生效，因其是替换元素且规范禁止添加伪元素；推荐用 onerror 内联事件加边框并清空自身，或结合 :has() 实现 CSS 控制。
img 的 :after 伪元素根本不会生效
直接说结论：:after 伪元素在 <img alt="CSS如何给图片出错的状态添加边框_结合img的:after伪元素（在某些浏览器有效）" > 上默认不渲染，因为 <img alt="CSS如何给图片出错的状态添加边框_结合img的:after伪元素（在某些浏览器有效）" > 是替换元素（replaced element），且规范明确禁止对它添加伪元素内容。Chrome、Firefox、Safari 均不支持，所谓“某些浏览器有效”基本是误判——可能是把父容器的 :after 当成了 img 自身的，或用了 JS 动态插入 fallback 元素冒充伪元素。
用 onerror + 内联样式快速兜底
最轻量、兼容性最好、能真正捕获图片加载失败的方案，就是利用原生 onerror 事件手动加边框：
-
onerror在图片 404、路径错误、跨域拒绝、格式不识别等场景下都会触发 - 必须写成内联属性（
<img onerror="this.style.border='2px solid red'" ... alt="CSS如何给图片出错的状态添加边框_结合img的:after伪元素（在某些浏览器有效）" >），否则 React/Vue 等框架中可能因事件绑定时机问题失效 - 避免重复触发：加完边框后建议立刻清除
onerror，防止后续重试时反复执行（比如 src 被 JS 修改）
示例：
<img src="broken.jpg" onerror="this.style.border='2px solid #f00'; this.onerror=null;" alt="fallback">
CSS :has() + onerror 配合实现纯 CSS 感觉
如果坚持想用 CSS 控制样式（比如统一主题色、响应式边框），可以靠 onerror 给父容器打标记，再用 :has() 选中：
立即学习“前端免费学习笔记（深入）”；
- 给
<img alt="CSS如何给图片出错的状态添加边框_结合img的:after伪元素（在某些浏览器有效）" >包一层<div class="img-wrapper"> <li> <code>onerror中执行this.parentElement.classList.add('img-error') - CSS 写：
.img-wrapper:has(img.img-error) { border: 2px dashed orange; }（注意：目前仅 Chrome 105+ / Safari 15.4+ 支持:has()，Firefox 尚未启用） - 别忘了在 JS 里同步处理
alt文本可见性或占位尺寸，否则边框出现时布局可能跳动 -
background-image不会触发onerror，无法自动感知失败；得靠Image()构造函数 +onload/onerror手动探测，复杂度陡增 -
object-fit是控制图片内部缩放的，和出错状态无关，不能替代错误检测逻辑 - SEO 和可访问性上，
<img alt="CSS如何给图片出错的状态添加边框_结合img的:after伪元素（在某些浏览器有效）" >+alt仍是唯一可靠方案；用 div 模拟会丢失语义，屏幕阅读器可能完全忽略
为什么不用 object-fit 或 background-image 替代？
有人想绕过 <img alt="CSS如何给图片出错的状态添加边框_结合img的:after伪元素（在某些浏览器有效）" > 的限制，改用 div + background-image，但要注意：
真正容易被忽略的是：边框只是表象，关键得让失败状态可感知、可维护、不影响渲染性能。加个红边框简单，但要不要同时显示错误路径、是否要上报监控、是否要降级为灰色占位图——这些决策点比伪元素能不能用重要得多。
