input等替换元素不支持::after，故无法直接添加星号；应将星号加在关联的label上或用js动态标记label并配合::after实现，同时注意可访问性与对齐。
为什么 :required 伪类加 ::after 有时不显示星号
直接写 input:required::after { content: "*"; } 无效——因为 input 是替换元素（replaced element），不支持 ::after 伪元素。浏览器会静默忽略，控制台也不报错，这是最常踩的坑。
真正可行的路径是：把星号加在表单控件的**标签（label）上**，或用 span 等非替换元素包裹控件再定位。
- 必填控件本身（
input、select、textarea）不能挂::after -
label是常规流内元素，完全支持::after，且语义正确 - 如果 label 和控件无显式关联（比如没用
for/id），label:has(> input:required)在部分浏览器还不稳定，优先用属性选择器
用 label[for] 关联 + :required 定位的可靠写法
前提是 HTML 中 label 通过 for 属性绑定到必填控件，例如：<label for="name">姓名</label><input id="name" required>。此时可安全使用属性选择器匹配：
label[for="name"]:has(+ input:required)::after,
label[for="email"]:has(+ input:required)::after {
content: " *";
color: #d32f2f;
font-size: 0.9em;
}
但更通用、无需硬编码 for 值的方式是：给必填控件加 required 属性后，在其前一个兄弟 label 上触发样式：
- 要求 HTML 结构为
<label>xxx</label><input required>（label 在前） - 用
label + input:required定位控件，再反向选中前面的 label：label + input:required { /* 不生效 */ }不行，得换思路 - 实际推荐：统一给必填控件加 class，如
class="required"，然后写label[for$="name"].required-label::after——但破坏了原生语义
最稳方案：不依赖 DOM 位置，改用 JS 补充 class（见下节）。
用 JS 扫描 :required 并动态加 class 更可控
CSS 无法跨元素“向上”影响父级或前序兄弟，纯 CSS 处理复杂表单易翻车。用几行 JS 主动标记关联的 label，反而干净：
document.querySelectorAll('input:required, select:required, textarea:required').forEach(el => {
const label = el.labels?.[0] || document.querySelector(`label[for="${el.id}"]`);
if (label) label.classList.add('has-required');
});
对应 CSS 就非常直白：
label.has-required::after {
content: " *";
color: #d32f2f;
margin-left: 4px;
}
-
el.labels是原生 API，返回该控件所有所属label元素（包括包裹型和for关联型） - fallback 到
label[for]查询，确保兼容老写法 - 避免用
querySelectorAll('label > input:required')，因为 label 内嵌 input 时，input不是 :required 的“子”，而是“后代”，需写label:has(input:required)，但 Safari 15.4+ 才支持:has()
星号对齐与可访问性注意事项
视觉上星号要和 label 文字基线对齐，否则会飘高或下沉；更重要的是，屏幕阅读器不该读出这个星号，否则干扰用户。
- 用
vertical-align: middle或vertical-align: text-bottom微调位置，避免默认 baseline 对齐导致偏移 - 必须加
aria-hidden="true"到生成的星号上——但::after伪元素无法加属性，所以只能放弃伪元素，改用真实 DOM 节点：<label>姓名<span aria-hidden="true" class="required-mark">*</span></label> - 如果坚持用
::after，至少确保星号不被读出：Chrome/VoiceOver 目前对content生成内容默认忽略，但 NVDA 有例外，稳妥起见仍建议真实节点 - 颜色别只靠红色区分，加图标或文字提示（如
aria-label="必填项"）更健壮
真正难的不是加星号，而是让星号既看得见、又读不见、还对得齐——这三个条件同时满足，纯 CSS 很难一揽子解决。
