为什么CSS伪元素不能直接加在img标签上？

CSS规范禁止在img、input等可替换元素上使用::before/::after，因其无内容流可挂载伪元素；浏览器直接跳过解析，不生成渲染节点；正确做法是将伪元素应用于其容器元素。

img 是可替换元素，规范禁止挂载伪元素

浏览器不为 img 生成内容流（content flow），而 ::before 和 ::after 必须依附于一个有内容流的宿主才能插入虚拟节点。这是 CSS 规范明确规定的限制，不是浏览器 bug，也不是兼容性问题。

你写 img::after { content: "★"; }，DevTools 的 Elements 面板里完全看不到该伪元素；Styles 面板中这条规则会被标记为“无效”或直接不显示——它压根没进入样式计算流程。

哪怕给 img 加上 display: block、position: relative 或 isolation: isolate，也无法绕过这一层规范拦截。

哪些元素也受同样限制？

所有可替换元素（replaced elements）都一样：

1. input、textarea、select、button（部分浏览器下 button 有例外，但不可依赖）
2. iframe、video、audio、canvas
3. 任何通过 content 属性生成的伪元素本身，也不能再被套用 ::before/::after

它们的共同点是：渲染行为由外部资源或浏览器原生控件接管，CSS 无法在内部插入内容。

为什么有时候看起来“生效”了？

常见误判来源有三个：

1. 把父容器的 ::after 当成了 img 自身的（比如写了 .wrap::after 却以为是 img::after）
2. 用了 JS 动态插入 fallback 元素（如 onerror 时加 div），误以为是伪元素渲染
3. 在图片加载失败时看到 img::before 显示内容——这是现代浏览器（Chrome/Firefox）对失败状态的特殊放宽，仅限于 src 为空或 404 场景，且不保证跨浏览器一致

这种“例外”不能作为通用方案依赖，尤其在生产环境涉及 Safari 或旧版 Edge 时极易失效。

真正能用的替代方案

核心原则只有一条：把伪元素移到容器上。

1. 用 div 或 figure 包裹 img，设 position: relative
2. 对容器应用 ::after，再用 position: absolute + top/right 定位到右下角
3. 需要悬停蒙层、角标、加载失败提示等效果，全部走这个路径
4. 若需首字符占位（如头像），优先用 img[alt] + attr(alt) 配合 text-overflow 截取，而非强求伪元素挂载在 img 上

最容易被忽略的是：伪元素的定位基准永远是其宿主元素的 border box，而 img 没有这个“盒子”来承载它——这个底层事实决定了所有绕行方案都必须从容器开始设计。