img 不支持 ::before/::after，因其为可替换元素，无 content area，伪元素无处挂载；替代方案包括包裹容器法、背景图法和加载失败兜底法。
因为 img 是可替换元素（replaced element），浏览器不为其生成用于插入伪元素的匿名内容框，::before 和 ::after 依赖这个框才能渲染，所以直接写 img::before 永远不会生效。
可替换元素不生成 content area，伪元素无处落脚
CSS 规范要求 ::before 和 ::after 必须插入到目标元素的“内容区域（content area）”内。而 img 这类可替换元素的内容由外部资源（如 JPEG 文件）完全决定，浏览器跳过常规的盒模型内容生成流程，直接用图像像素填充整个盒区——它根本没有传统意义上的 content area，自然无法承载伪元素。
你在开发者工具里检查 img::before 样式时，会发现该规则被标记为 invalid 或干脆不列出，这不是浏览器 bug，是主动忽略。
-
img、video、iframe、input[type="image"]都属于同一类，全部不支持::before/::after - 即使你写了
content: ""并设置了display: block，样式也不会出现在 DOM 渲染树中 - 旧版 Chrome 曾短暂允许，但已统一移除；2026 年所有主流浏览器（Chrome/Firefox/Safari/Edge）均严格遵循规范
为什么 content 属性在这里也救不了你
content 是 ::before/::after 生效的必要条件，但它不是充分条件。对 img 来说，问题不在 content 写没写，而在浏览器压根不创建那个能挂载伪元素的上下文节点。
立即学习“前端免费学习笔记（深入）”；
你可以对比：
/* 无效：img 没有 content area，伪元素无法实例化 */
img::before { content: "⚠"; }
<p>/<em> 有效：div 有标准 content area，伪元素可渲染 </em>/
.img-wrapper::before { content: "⚠"; position: absolute; }-
content只是“触发器”，不是“通行证” - 没有 content area → 没有匿名盒子 →
content值再合法也没地方显示 - 别试图用
display: contents或position: relative强行激活——这些属性改变布局，但不创造 content area
替代方案：绕过限制的三种实操路径
真正能落地的解法，不是硬刚规范，而是换载体、换时机、换机制。
-
包裹容器法：用
<div class="img-container"><img src="..." alt="为什么CSS伪元素 ::before 无法在单标签元素（如img）上生效？" ></div>，把伪元素加在.img-container上，再用position: absolute定位覆盖图片 -
背景图法：改用
div的background-image，配合background-size: cover和background-position模拟img行为，此时::before完全可用 -
加载失败兜底法：监听
img.onerror，动态插入一个带::before的span或替换为带伪元素的div，而不是指望伪元素自己“冒出来”
最常被忽略的一点是：很多人以为加了 content 就算“写对了”，其实关键在于理解伪元素依赖的是渲染上下文的存在性，而不是 CSS 语法的完整性。只要没意识到 img 是个“内容黑箱”，就永远会卡在这个看似简单的问题上。
