input等可替换元素不支持::before/::after伪元素，因其无文档内容流；需将伪元素挂载到其容器元素上，并确保content非none、display正确、定位上下文存在且未被裁剪。
input 是可替换元素，规范禁止挂载伪元素
不是浏览器没实现，也不是你写错了选择器——input 属于 CSS 规范定义的「可替换元素」（replaced element），它没有文档内容流，无法承载 ::before 或 ::after。浏览器解析到 input::after { content: "✓" } 时，直接跳过整条规则，不生成任何渲染节点。
常见误判是打开 DevTools 看不到样式被“覆盖”，其实是根本没进样式计算流程：Styles 面板里这条规则可能压根不显示，或标记为“无效”；Elements 面板中也绝不会出现 ::after 对应的盒子。
-
img、textarea、select、iframe同样受此限制，和标签写法（单标签/双标签）无关 - 加
display: block、position: relative或content再合法也没用——宿主不支持，后续样式全失效 - 哪怕用
:valid、:focus等状态伪类组合，也无法绕过这一层语义限制
想给 input 加图标或校验提示，该怎么做
核心原则只有一条：把 ::after 挂到 input 的**容器元素**上，再通过状态联动控制显隐。
- 推荐 HTML 结构：
<label><input type="email" required>邮箱</label>（嵌套），然后写label input:valid + label::after或更稳的label:has(input:valid)::after（注意:has()在 Safari 15.4+ 才稳定） - 若不能改 HTML，可用外层
<div class="input-wrapper"><input></div>，再写.input-wrapper::after，配合.input-wrapper input:valid ~ ::after（需 input 在伪元素前且同级） - 纯视觉装饰（如右侧清空按钮图标）建议用
background-image或额外<span>元素，而非硬套伪元素
为什么 content 属性写了还是不显示
即使你把 ::after 挂到了正确容器上，仍可能不显示——这时问题已不在 input 本身，而是伪元素自身配置缺失。
立即学习“前端免费学习笔记（深入）”；
-
content必须存在且非none：content: ""合法但只生成空盒；content: " "（一个空格）更稳妥，避免因空白折叠导致尺寸为 0 - 默认
display: inline，设了width、height、top却没改display？必须加display: block或display: inline-block - 用了
position: absolute却没给父容器设position: relative？伪元素会相对视口定位，极易跑出可视区 - 父容器有
overflow: hidden，而伪元素偏移后超出边界——检查 computed 样式里的overflow值
容易被忽略的细节：伪元素生效的完整链条
伪元素不是“写上就显示”，它依赖一连串前提同时满足：
- 宿主元素必须支持伪元素（不能是
input、img等可替换元素） -
content值非none，且值能被解析（如 Unicode 字符需转义：content: "\2714"，而非content: "✓"） - 伪元素自身有可渲染的视觉属性（
display、尺寸、颜色、背景等） - 定位上下文存在（
position: absolute需已定位祖先）且未被裁剪（overflow干预） - 未被更高优先级规则覆盖（如其他地方写了
content: none）
卡在任意一环，都会表现为“不显示”，但原因完全不同。调试时先确认宿主是否合法，再逐层往下查。
