CSS规范禁止在img、input等可替换元素上使用::before/::after，因其无内容流可挂载伪元素；浏览器直接跳过解析，不生成任何渲染节点；正确做法是将伪元素应用于其容器元素。
为什么 img 和 input 不能用 ::after？
不是浏览器兼容性问题，也不是你写错了 CSS——是 CSS 规范直接禁止在可替换元素（replaced elements）上使用 ::before 和 ::after。这类元素的内容由外部资源或浏览器原生控件决定，比如 img 的像素来自图片文件，input 的渲染由表单控件引擎接管。CSS 无法在它们内部插入虚拟节点，因为它们没有“内容流”可挂载伪元素。
img::after { content: "×" } 看起来没报错，但实际发生了什么？
浏览器解析到这条规则时，会直接跳过，不生成任何渲染节点。DevTools 的 Elements 面板里完全看不到 ::after 对应的盒子；Styles 面板中即使写了该规则，也会被标记为“无效”或根本不显示。常见误判是以为它被覆盖了，其实连参与样式计算的机会都没有。
-
content属性再合法也没用——根本不会触发伪元素创建逻辑 -
display、position、background等后续样式全部失效，因为宿主盒子不存在 - 哪怕把
img改成display: block或加position: relative，也无法绕过这一层规范限制
想给 img 或 input 加装饰，真正能用的方案有哪些？
核心思路只有一条：把伪元素挪到**支持它的容器上**，而不是硬套在替换元素本身。
- 用
.img-wrapper::after - 对
input，可套，再用.input-container::before - 若必须保持 HTML 不变，可用
::selection做图片区域选中高亮（仅限用户拖选时） -
input可配合:focus+ 相邻兄弟选择器（如input:focus + .icon）控制旁置元素，但不是伪元素
容易被忽略的细节：伪元素生效的前提条件
即使你用了正确的容器，也得确保伪元素自己满足基本要求：
-
content必须存在且非空（content: ""是合法起点，但若只设content: ""又没配尺寸/背景，视觉上仍是空白） - 如果伪元素是行内级（默认），而父容器是
display: inline，它可能不占空间——常需加display: block或inline-block - 父容器若设了
overflow: hidden，又让伪元素用position: absolute偏移出去，就会被裁剪——看起来像“没显示” -
z-index在伪元素上无效，它继承宿主元素的层叠上下文；要调层级，得改宿主或其父容器的position和z-index
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
