input:required::after不显示星号是因为input是替换元素，浏览器不支持在其上使用伪元素；正确做法是用label:has(> :required)::after或label.required::after添加星号，并同步设置aria-required="true"。
直接给 input:required::after 加星号会失效——浏览器根本不渲染，因为 input 是替换元素，不支持伪元素。 正确做法是把星号加在 label 上，且必须确保 label 与 input 的关联关系有效。
为什么 input:required::after 不显示星号
这不是写法错误，而是浏览器规范限制：input、select、textarea 等表单控件属于“替换元素”（replaced elements），绝大多数浏览器（包括 Chrome、Firefox、Safari 当前主流版本）明确不支持在其上使用 ::before 或 ::after。即使 CSS 语法合法，样式也会被静默忽略。
常见误操作包括：
- 写
input:required::after { content: "*" }，页面完全没反应 - 用
label:required::after——label元素本身没有required属性，这个选择器永远不匹配 - 在
th或div上硬加 class 和::after，但脱离了语义关联，屏幕阅读器无法识别必填含义
label:has(> :required)::after 的实际使用条件
这是目前最语义清晰、无需 JS 的现代方案，但依赖 :has()，需注意运行环境：
立即学习“前端免费学习笔记（深入）”；
- 必须确保
label直接包裹或通过for显式关联一个带required的控件，例如：<label>姓名<input required></label>或<label for="email">邮箱</label><input id="email" required> -
:has(> :required)中的>是子选择器，若中间隔了span或div，匹配就会失败 - Safari 15.4 之前、部分安卓 WebView（如旧版微信内置浏览器）不支持
:has()，此时该规则完全不生效 - 别漏空格：
content: " *"（前面带空格），否则星号会紧贴文字，影响可读性
[required]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])::after 的适用场景
这个属性选择器方案绕开了 label 关联问题，直接作用于控件自身，但只适用于能安全加伪元素的非替换元素——实际上它只对少数情况“意外有效”，比如自定义 Web Component；对原生 input 仍无效。真正可靠的是把它用在 label 的子元素上，或降级为显式 class 控制：
- 推荐组合：
label.required::after+ 手动在 HTML 中写<label class="required">姓名</label> - 若用 JS 注入 class，请确保在 DOM ready 后执行，并监听动态插入的表单项（如 tab 切换后加载的表单）
- 避免对
type="checkbox"和type="radio"加星号：它们通常以组形式存在，必填逻辑应落在整组语义上，而非单个控件 - 加
vertical-align: middle和margin-left: 4px，防止星号基线偏移或粘连文字
排版对齐和可访问性容易被忽略的细节
星号不是装饰，是关键提示。很多项目上线后才发现它在高缩放比下错位、在暗色模式下不可见、或被屏幕阅读器跳过：
- 别用
font-size: 0.8em缩小星号——它会降低可读性，且不影响屏幕阅读器行为（伪元素默认不被朗读，除非加aria-hidden="false"并设role="presentation"） - 颜色用
color: #d32f2f（Material Design 推荐值），避免纯黑（#000）或荧光红（#ff0000），前者对比度不足，后者易引发视觉疲劳 - 如果
label是display: block，星号可能换行，此时加display: inline-block更稳 - 必须同步设置
aria-required="true"在对应控件上，否则仅靠视觉星号，读屏器用户无法感知必填状态
