可用label:has(> input:required)::after加红星，但需现代浏览器支持；旧版浏览器应改用label.required::after配合class控制，因::after不作用于input等替换元素。
如何用 :required 和 ::after 给必填表单字段加红星
直接生效，不需要 JS，但得注意伪元素默认不作用于 <input> 这类替换元素（如 <textarea></textarea>、<select></select> 也不行）。所以不能对 <input required> 直接写 input:required::after —— 浏览器会忽略它。
可行做法是把星号加在标签（<label></label>）上，或用 <span></span> 包裹输入控件。推荐前者，语义清晰且无障碍友好。
- 给每个必填项的
<label></label>加for属性并指向对应id - 用
label:has(> input:required, > select:required, > textarea:required)::after插入星号（需现代浏览器支持:has()） - 若要兼容旧浏览器（如 Safari 15.6 之前），改用 class 驱动：给
<label></label>加class="required"，再写label.required::after
:required 的匹配范围和常见失效场景
:required 只匹配显式写了 required 属性的表单控件，不会识别 aria-required="true" 或后端校验逻辑。它也不匹配 <input type="hidden">，哪怕带 required 属性也会被忽略（规范如此）。
-
<input required>✅ 匹配 -
<input required="required">✅ 同上，属性值任意都行 -
<input required="">✅ 空字符串也有效 -
<input aria-required="true">❌ 不触发:required -
<input type="hidden" required>❌ 浏览器强制忽略
用 ::after 添加星号时的样式控制要点
伪元素默认是 inline 级别，容易跟文字挤在一起。加星号不是为了炫技，而是明确传达“此处必填”，所以可读性和对齐很关键。
- 必须设
content: "*"，否则啥都不显示 - 建议加
color: #d32f2f（深红）而非纯黑，视觉权重更合适 - 加
margin-left: 4px避免紧贴文字，但别用padding—— 伪元素没有盒模型中的 padding 行为 - 若 label 是 block 布局，星号可能换行，此时加
display: inline-block更稳 - 避免用
font-size: 0.8em缩小星号：屏幕阅读器不会读它，缩太小反而降低可访问性
为什么不用 JS 动态加星号更简单？
纯 CSS 方案看似轻量，但实际在复杂表单里容易失控。比如动态插入字段、条件显示/隐藏、多语言切换时，CSS 无法感知 DOM 变化。这时候 JS 主动控制 class 更可靠。
一个折中方案是：CSS 提供基础样式（.field-required::after），JS 根据 required 属性是否存在来 toggle field-required 类。这样既保留 CSS 的渲染效率，又避开 :required 的兼容与语义局限。
真正难的不是加一颗星，而是让这颗星在所有设备、所有状态、所有辅助技术下都准确表达“必填”含义 —— 这点 CSS 单独做不到，得靠结构 + 属性 + 样式协同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
