input:valid::after 不显示图标是因为 input 是替换元素，规范禁止其生成 ::before 或 ::after 伪元素，所有浏览器均严格遵循此标准。
为什么 input:valid::after 永远不显示图标
因为 input 是替换元素（replaced element），规范禁止它生成 ::before 或 ::after 伪元素盒——这不是 Safari 或 Chrome 的兼容性问题，是所有浏览器都按标准执行的硬性限制。你写 input:valid::after { content: "✓"; }，CSS 解析器直接忽略，连渲染树都不会创建该伪元素。
用 label:has(input:valid)::after 实现合法状态图标
必须把伪元素挂到能承载它的容器上，同时保持与 input 校验状态联动。最简可行结构是嵌套式 label：
<label> <input type="email" required> 邮箱 </label>
对应 CSS（需确保 :has() 支持）：
label:has(input:valid)::after {
content: "✓";
color: #38a169;
margin-left: 8px;
}
-
:has()在 Safari 15.4+、Chrome 105+、Firefox 119+ 稳定可用；旧版 Safari/Chrome 需降级方案 - 不要用
input:valid + label::after：外部关联时label不一定紧邻input，且无法保证label在 DOM 中位于input后方 - 若用外部
for/id关联，label必须放在input后面，且中间不能有文本节点或注释，否则+失效
不支持 :has() 时的兼容 fallback 方案
降级核心思路：用 JS 切换类名，再靠相邻选择器驱动样式。HTML 结构保持严格同级相邻：
<input type="email" required id="email"><span class="validation-icon"></span>
JS 监听输入并手动同步状态：
const input = document.getElementById('email');
const icon = document.querySelector('.validation-icon');
const updateIcon = () => {
icon.classList.toggle('valid', input.checkValidity() && input.value);
};
input.addEventListener('input', updateIcon);
input.addEventListener('blur', updateIcon);
updateIcon(); // 初始化
CSS 写法（稳定兼容所有现代浏览器）：
input:valid + .validation-icon::after,
input.valid + .validation-icon::after {
content: "✓";
color: #38a169;
}
.validation-icon::after {
display: inline-block;
margin-left: 8px;
}
- 务必保留
input:valid + .validation-icon::after—— 它对原生校验有效，JS 只补足初始态和中间态 - 不要用
display: none隐藏图标容器，否则+选择器找不到目标；用opacity: 0; height: 0; overflow: hidden;更安全 - 移动端需额外监听
change，因软键盘常不触发input事件
容易被忽略的校验前提：:valid 不是“有内容”就触发
:valid 只在元素具备原生校验能力且值通过全部约束时才生效。常见失效原因：
-
<input type="text">没加required或pattern→ 浏览器不认为它是可校验字段，:valid永远不匹配 -
<input type="email" value="">→ 空字符串不符合 email 格式，初始即:invalid，不是:valid - JS 直接改
input.value后未调用input.dispatchEvent(new Event('input'))→ 浏览器不重算 validity，:valid状态滞后
真正起作用的永远是 HTML 层的约束声明，不是 CSS 本身；CSS 只是把已计算出的状态可视化出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
