为什么 input 不支持 ::before 伪元素？原因在于它属于替换元素，CSS 规范明确禁止这样使用。那么该如何给输入框添加前缀图标呢？正确做法是先用一个外层容器包裹 input，把容器的 position 设置为 relative，再将 ::before 应用到容器上，同时为 input 预留足够的 padding-left，这样才能实现常见的 CSS 输入框前缀图标效果。
想直接用 ::before 给 添加图标是行不通的——因为 input 本身不支持伪元素，必须额外套一层容器来实现。
为什么不能直接写 input::before？
根据浏览器实现规范，替换元素（例如 input、textarea、img）不能使用 ::before 或 ::after。即使你在 CSS 中写了对应代码，浏览器通常也不会报错，但伪元素内容根本不会被渲染，在开发者工具里也无法看到对应节点。这也是很多人搜索“为什么 input::before 不生效”的根本原因。
- 常见错误现象：
input::before { content: "?"; }写了之后依然什么都不显示 - 替代方案：必须使用
这样的包裹结构，再对 wrapper 容器添加::before - 兼容性说明：这不是浏览器 bug，而是所有现代浏览器普遍遵循的标准行为
正确结构：容器 + ::before + 内边距对齐
实现输入框前缀图标的核心步骤有三点：先给父容器设置 position: relative，再让伪元素通过绝对定位放到输入框左侧，最后给 input 增加合适的 padding-left，避免输入文字与图标重叠。这也是最常见、最稳妥的 CSS 输入框图标方案。
- HTML 必须这样写：
- CSS 关键部分：
.input-with-icon { position: relative; } .input-with-icon input { padding-left: 36px; /* 至少大于图标宽度 */ width: 100%; } .input-with-icon::before { content: "1F50D"; /* ? Unicode */ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #999; } - 注意事项：如果你使用的是 Font Awesome 图标字体，那么
font-family和font-weight通常都必须正确设置，否则图标很可能显示成方块或乱码
用 background-image 替代 content 的适用场景
当你需要更灵活地控制图标缩放、颜色表现，或者希望 SVG 图标保持更好的清晰度时，使用 background-image 往往比单纯依赖 content 更容易控制。尤其是在带圆角、描边或复杂视觉样式的输入框中，这种方式通常更适合前缀图标的实现。
- 示例：
.input-with-icon::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("search.svg") no-repeat center; background-size: contain; } - 路径基准需要特别注意：这里的资源路径是相对于 CSS 文件，而不是 HTML 页面本身，配置不当很容易导致 404；更稳妥的做法是使用内联 data URL 或通过 CSS 变量统一管理
background方案的限制在于无法直接通过color修改颜色，如需换色，通常需要替换图片资源或准备多份不同颜色的 SVG
还有一个很容易被忽略但非常重要的点，就是可访问性。通过 ::before 插入的图标，对屏幕阅读器而言通常是不可见的。如果这个图标承担了明确的功能提示作用，例如“密码可见”切换或搜索含义提示，那么就应当在 标签上补充合适的 aria-label 等无障碍属性，不能只依赖视觉上的图标提示。
