css规范禁止在img等可替换元素上使用::before/::after，因其无内容流可挂载伪元素；浏览器直接跳过解析，不生成渲染节点；正确做法是将伪元素应用于其容器元素。
因为 img 是可替换元素（replaced element），CSS 规范明确禁止在它上面生成 ::before 或 ::after 渲染节点——不是浏览器不支持，而是压根不进入样式计算流程。
为什么 img::after { content: "×" } 在 DevTools 里完全看不到？
浏览器解析到这条规则时，直接跳过，不创建伪元素盒（pseudo-element box）。Elements 面板里没有新增节点，Styles 面板中该规则可能被标记为“无效”或干脆不显示。这不是渲染失败，是根本没启动。
-
content写得再对也没用——伪元素创建逻辑在宿主类型检查阶段就被拦截 - 加
display: block、position: relative、isolation: isolate全部无效 - 哪怕 src 404，部分浏览器（Chrome/Firefox）临时显示 fallback 内容，也仅限该错误场景，不可依赖
哪些标签同样不支持 ::before / ::after？
所有可替换元素都受同一限制，包括：
-
img、input、textarea、select、button（部分浏览器对button有非标准宽松行为，但不应依赖） -
iframe、video、audio、canvas - 任何由外部资源或原生控件主导渲染的元素
它们的共同点：内容流（content flow）不由 CSS 控制，因此无法挂载需依附于内容流的伪元素。
为什么容器上套 ::after 就能生效？
关键在于容器提供了合法的“宿主盒子”：
- 必须设
position: relative（或其他非static值），否则position: absolute的::after会相对于视口定位，极易跑偏 - 容器建议设
display: block或inline-block，避免因高度塌陷导致定位基准丢失 -
img自身推荐加display: block，消除行内默认基线对齐带来的底部空白 -
::after的定位基准永远是其宿主的 border box——而img没有这个可承载的盒子
例如：.img-wrap::after { content: "NEW"; position: absolute; top: 8px; right: 8px; } 中的定位生效，靠的是 .img-wrap 提供了完整的、可参与定位上下文的盒子模型。
最容易被忽略的底层事实
伪元素不是“贴图”，也不是“覆盖层”；它是插入在宿主元素内容流中的虚拟子节点。当宿主连内容流都没有（如 img），就不存在插入位置——这个前提决定了所有绕行方案都必须从容器建模开始，而不是在 img 上反复调试 z-index 或 transform。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
