input:valid::after 在所有浏览器中均无效，因 input 是替换元素，不生成内容流，无法承载伪元素；须通过 label 或容器等普通元素联动 :valid 状态实现视觉反馈。
input:valid::after 在所有浏览器里都无效——不是兼容性问题，是规范禁止。
为什么 input:valid::after 一定不生效
input 是替换元素（replaced element），默认不生成内容流，因此无法承载 ::before 或 ::after。你写 input:valid::after { content: "✓"; }，CSS 引擎直接忽略，连报错都不会有。
真正能用的结构：用 label 或容器承载伪元素
必须把 ::after 挂在支持伪元素的普通元素上，并通过选择器联动 input:valid 状态：
- 推荐嵌套结构：
<label><input type="email" required>邮箱</label>，然后用label:has(input:valid)::after（Safari 16.4+、Chrome/Firefox 稳定） - 更兼容的写法（支持 Safari 15.4+）：
input:valid + label::after，前提是label紧跟input后且同级 - 通用容器方案：给父容器设
position: relative，内部放input和一个.checkmark元素，用input:valid + .checkmark控制显隐
:valid 触发的真实条件和常见坑点
它只响应原生约束属性，且逻辑容易误判：
-
required字段为空 →:invalid；非required字段为空 →:valid（这是最常被忽略的） -
type="number"输入字母时为:invalid，但清空后可能残留valueAsNumber === NaN，导致后续不触发:valid - 没加
required也没设pattern的text输入框，永远:valid（包括空字符串） - 手动调用
input.setCustomValidity("")会覆盖原生校验，使:valid行为不可预测
定位图标时最容易错的三件事
勾选图标“飘走”或“压不住文字”，基本都出在这几个环节：
- 没给父容器加
position: relative，导致position: absolute的图标相对于 body 定位 -
input没预留右侧 padding，图标会盖住文字或超出边框（建议padding-right: 32px起） - 用
top: 50%; transform: translateY(-50%)垂直居中时，input高度若含 border/padding，需确保计算基准一致；更稳妥的是用 flex 容器对齐
真正起作用的不是“写对了 ::after”，而是让状态可联动、定位有上下文、验证逻辑不被空值或类型陷阱绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
