input、img、iframe等替换元素不支持::before是CSS规范限制；它们不生成伪元素盒模型，DevTools中不可见，content恒为none。
input、img、iframe 等单标签不支持 ::before，是规范限制，不是 bug
不是浏览器没实现，也不是你 CSS 写错了；input、img、iframe、video、textarea 这些属于「替换元素」（replaced element），CSS 规范明确禁止在它们上生成 ::before 或 ::after 节点。浏览器根本不会创建伪元素盒模型——DevTools 的 Elements 面板里完全看不到，Computed 里的 content 值永远是 none。
常见错觉：input[type="checkbox"] 在 Chrome 里看似能用 ::before，但这只是 UA 样式扩展行为，Firefox 或 Safari 下大概率失效，不能当作兼容方案。
伪元素不显示的首要原因：content 属性缺失或非法
即使目标元素支持伪元素，::before 也必须带合法的 content 值，否则浏览器直接跳过渲染：
-
content没写，等价于content: none，伪元素不生成 -
content: "✓"正确；content: ✓（漏引号）或content: u2713（错用 Unicode 表示法）会静默失败 -
content: attr(data-tip)只读宿主元素自身的data-tip属性，拼错名、挂错选择器、属性为空都会返回空字符串 -
content: ""是合法且常用写法，用于占位+布局；content: none则彻底禁用
伪元素“存在但看不见”的典型表现和排查点
content 正确、元素也支持伪元素，但页面还是没反应？多半是视觉层面被隐藏了：
-
::before默认是display: inline，没有宽高、背景、边框时，盒子存在但不可见 - 加一句
border: 1px solid red，立刻能验证是否真渲染出来了 - 父容器设了
overflow: hidden，可能把绝对定位的伪元素裁掉 - 某些 CSS 重置库（如 Normalize.css）全局写了
*::before, *::after { content: "" }，会覆盖你后续未显式声明content的规则 - 宿主元素没设
position: relative，而你又用了position: absolute，伪元素就会相对于body定位，飘到屏幕外
想给 input 加前缀图标？别硬刚 ::before，用容器包装最稳
真实项目里最可靠的做法，是把 input 包进一个普通容器（比如 div），再对容器使用 ::before：
- 容器必须设
position: relative，否则伪元素定位失控 -
input自身要清掉默认padding、border和background，否则和伪元素视觉打架 - 伪元素如果是装饰性图标，务必加
pointer-events: none，否则会拦截聚焦和点击 - 不要试图用
z-index把伪元素“压”到input上层——它们不在同一渲染路径，z-index 不起作用
真正容易被忽略的，是看到伪元素不生效时，第一反应不该调 color 或 font-size，而是先确认目标元素是不是替换元素；如果不是，再查 content 是否合法、是否被重置、是否被裁剪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
