可行但需JS配合：::before仅作视觉增强，须用onerror添加class标记失败状态，再通过CSS控制显示占位内容，同时隐藏原图；伪元素生效需img设position:relative及宽高。
图片加载失败时，用 ::before 伪元素显示本地占位提示是可行的，但要注意：伪元素无法直接替换或接管 <img alt="css图片加载失败想显示占位提示怎么办_用::before伪元素创建本地占位显示" > 的加载失败行为，它只是在 img 元素上“盖一层”，不能响应 onerror 或替代 src 失效逻辑。真正可靠的做法是结合 HTML + CSS + 少量 JS，而 ::before 可作为视觉增强手段——比如在加载失败后显示文字提示或默认图标。
✅ 正确思路：img 自身处理失败 + ::before 辅助展示
单纯靠 CSS 无法监听图片是否加载失败（浏览器不触发伪元素重绘），所以必须借助 onerror 属性或 JS 监听，把失败状态“标记”出来（比如加 class），再让 ::before 基于该 class 显示占位内容。
- 给
<img alt="css图片加载失败想显示占位提示怎么办_用::before伪元素创建本地占位显示" >添加onerror="this.classList.add('load-failed')" - 用 CSS 定义：
img.load-failed::before显示提示文字或图标 - 同时隐藏原图（
img.load-failed { visibility: hidden; }或opacity: 0）
? 示例代码（纯前端，无构建工具）
<img src="missing.jpg"
alt="示例图片"
onerror="this.classList.add('load-failed')">
CSS 部分：
img {
display: inline-block;
position: relative;
}
img.load-failed {
visibility: hidden;
}
img.load-failed::before {
content: "⚠ 图片加载失败";
display: block;
width: 100%;
height: 100%;
background: #f5f5f5;
color: #999;
font-size: 14px;
line-height: 160px;
text-align: center;
border: 1px dashed #ddd;
}
⚠ 注意：::before 要生效，img 必须设 position: relative（否则伪元素定位可能错乱），且需有宽高（可通过父容器、min-width/min-height 或 aspect-ratio 控制）。
立即学习“前端免费学习笔记（深入）”；
? 进阶技巧：用 data-* 属性统一管理提示文案
避免硬编码提示文字，提升可维护性：
<img src="xxx.jpg"
data-error-text="封面图暂不可用"
onerror="this.classList.add('load-failed')">
CSS 中用 attr() 动态读取：
img.load-failed::before {
content: attr(data-error-text);
/* 其他样式同上 */
}
✅ 支持中文、emoji、空格；注意 attr() 在伪元素中仅支持字符串值，不执行 JS 表达式。
? 常见误区提醒
- 不要只靠 ::before + :not([src]) 或类似纯 CSS 判断 —— 浏览器不会因 src 404 重绘伪元素
-
img 默认是 inline 元素，::before 在 inline 元素上表现受限 —— 务必设
display: block/inline-block和position: relative -
避免用 opacity: 0 隐藏失败图片 —— 仍占布局、可聚焦、影响可访问性；推荐
visibility: hidden或width: 0; height: 0（配合 overflow: hidden）
基本上就这些。核心是：CSS 伪元素负责“画”，JS（哪怕一行 onerror）负责“通知”。两者配合，轻量又可控。
