:invalid 不触发 ::before 是因为 是替换元素，原生不支持伪元素；解决方法是用容器包裹并借助 :has() 或 JS 切换类来控制图标显示。
为什么 :invalid 本身不触发 ::before？
:invalid 是伪类，但只有可表单验证的元素（如 <input>、<select></select>、<textarea></textarea>）才支持它；而 ::before 要生效，该元素必须是“可生成盒”的（replaced element 或常规流内元素），且 display 不能是 none。关键点在于：<input> 默认是 replaced element，**不支持 ::before/::after** —— 这就是你加了样式却看不到图标的最常见原因。
解决思路：不直接在 <input> 上用 ::before，而是把它包进一个容器（比如 <div class="field">），让伪元素挂载在容器上。<ul>
<li>确保父容器有 <code>position: relative，方便图标定位
.field:has(> input:invalid)（现代浏览器）或 JS 切换 class（兼容旧版）来控制状态content: "⚠"; 配合系统字体，避免额外请求用 :has() 实现纯 CSS 的实时反馈（Chrome 105+ / Safari 15.4+）
如果你的目标浏览器支持 :has()，这是最干净的方案：无需 JS，输入即响应。
.field {
position: relative;
}
.field:has(> input:invalid) .field-icon::before {
content: "⚠";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #d32f2f;
font-size: 14px;
}
<div class="field">
<input type="email" required>
<span class="field-icon" aria-hidden="true"></span>
</div>注意：:has() 不接受伪元素作为子选择器目标，所以 <span class="field-icon"></span> 必须是真实 DOM 节点，不能用 .field::after 模拟。
立即学习“前端免费学习笔记（深入）”；
-
:invalid在用户未交互时就可能触发（比如页面加载后空必填字段），可用:user-invalid替代（仅 Firefox 支持）或配合:focus-within降级 - IE 和旧版 Edge 完全不支持
:has()，需 fallback
兼容老浏览器的 JS 辅助方案（推荐用于生产环境）
监听 input 和 blur 事件，手动切换 .is-invalid 类，再用 CSS 控制图标显示：
const inputs = document.querySelectorAll('input[required], input[type="email"]');
inputs.forEach(input => {
const field = input.closest('.field');
const update = () => {
field?.classList.toggle('is-invalid', !input.checkValidity());
};
input.addEventListener('input', update);
input.addEventListener('blur', update);
});CSS 端只需写：
.field.is-invalid .field-icon::before {
content: "⚠";
/* 同上定位样式 */
}- 不要只依赖
change事件——它不适用于实时反馈 -
checkValidity()返回false时，浏览器会自动调用reportValidity()显示原生提示；如需隐藏原生提示，加input.addEventListener('invalid', e => e.preventDefault()) - 注意
type="number"在输入非数字时会变为空字符串，导致required校验失败，但用户可能还没输完——建议搭配min/step或自定义校验逻辑
图标位置与可访问性容易被忽略的细节
图标只是视觉增强，不能替代错误文案。屏幕阅读器默认忽略 ::before 内容，所以必须同步更新 aria-invalid 和关联的 aria-describedby。
- 给
<input>加aria-invalid="true"，并在旁边放<span id="email-error">请输入有效邮箱</span>，然后通过aria-describedby="email-error"关联 - 图标容器（如
.field-icon）应设aria-hidden="true"，避免干扰读屏 - 颜色不能是唯一错误标识，加图标 + 文字 + 背景色变化（如
border-color: #d32f2f）三重信号 - 移动端点击区域要够大，图标右侧留出至少 44×44px 可触控空间
真正难的不是加个警告图标，而是让这个图标在任意输入节奏下都准确反映验证状态，同时不破坏键盘导航和读屏体验。别为了“纯 CSS”牺牲健壮性，尤其当表单涉及金融或注册流程时。
