::before 在 上完全不生效，因为它是替换元素，css 规范明确禁止在其上使用 ::before/::after 伪元素；同属此类的还有 、、、、、。
为什么 ::before 在 <input> 上完全不生效
因为 <input> 是浏览器原生的替换元素（replaced element），其渲染由 UA 样式和底层控件决定，::before 和 ::after 伪元素在规范中明确禁止作用于替换元素。这不是兼容性问题，而是 CSS 规范层面的硬性限制——无论你加 content、设 display、甚至用 !important，DOM 中都不会生成伪节点，DevTools 里也根本看不到。
哪些元素属于同类型“伪元素失效区”
除 <input> 外，以下常见替换元素同样无法使用 ::before/::after：
<img>-
<textarea></textarea>（注意：虽是可编辑，但仍是替换元素） <select></select><iframe></iframe>-
<video></video>、<audio></audio>
它们的共同点是：内容不由 CSS 盒模型直接控制，浏览器会用独立渲染路径绘制内部结构，伪元素无处挂载。
容器包装法实操要点
绕过限制的唯一可靠方式，是用一个普通块级容器包裹 <input>，把装饰逻辑转移到容器上：
<div class="input-wrapper"> <input type="text" class="real-input"> </div>
然后对 .input-wrapper 使用伪元素：
.input-wrapper {
position: relative;
display: inline-block;
}
.input-wrapper::before {
content: "?";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
color: #999;
}
关键细节：
- 必须给容器设
position: relative，否则absolute伪元素会相对于最近定位祖先偏移，容易错位 -
<input>自身需重置默认边框/内边距（如border: none; padding: 8px; background: transparent;），避免和伪元素视觉冲突 - 若需点击穿透（比如图标只是装饰），给伪元素加
pointer-events: none - 不要试图用
z-index让伪元素盖在<input>上——它本来就不在同一个渲染层，优先级逻辑无效
为什么不用 JavaScript 动态插入标签
虽然可以用 JS 插入 <span></span> 模拟 ::before，但会引入额外复杂度：
- 需监听
input的focus/blur手动同步状态类 - 表单序列化时要额外处理自定义节点（比如图标旁的隐藏
<input>容易漏掉 name 属性） - 无障碍支持变差：屏幕阅读器可能误读插入的装饰节点
- React/Vue 等框架中易触发不必要的 re-render 或 ref 冲突
容器包装法是纯 CSS 方案，零 JS 侵入，语义清晰，且所有现代浏览器行为一致。
真正麻烦的不是写法，而是习惯性忽略“替换元素”这个概念——看到 <input> 就默认它和 <div> 一样能套伪元素，结果调试半小时才发现规范早写了“not allowed”。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
