:required 伪类本身不显示星号，必须通过 ::after 或 ::before 作用于 label 等非替换元素；input:required::after 无效因 input 是替换元素，不支持伪元素；推荐用 label:has(input:required)::after 实现自动标记，兼容现代浏览器。
直接结论： :required 本身不显示星号，必须配合 ::after 或 ::before 伪元素作用于支持伪元素的容器（如 label），且该容器需能准确关联到带 required 的表单控件。
为什么 input:required::after 不生效
因为 input 是替换元素（replaced element），绝大多数浏览器（包括 Chrome、Firefox、Safari 当前主流版本）**不支持在其上使用 ::before 或 ::after**。写 input:required::after { content: "*" } 看似合理，实际完全被忽略——控制台不会报错，但星号就是不出现。
- 替代方案只能是把伪元素挂到
label、div.form-item这类非替换元素上 - 若 HTML 中没有
label（比如用aria-label），则必须引入父容器并手动加 class 或用 JS 补充逻辑 - 不要尝试给
input设置contenteditable来“绕过”限制——语义错误且破坏表单可访问性
用 label:has(input:required)::after 动态插入星号（现代推荐）
这是目前最干净、免维护的方案：无需改 HTML 结构，不依赖 class，纯靠 DOM 关系自动匹配。
- 要求
label必须显式包裹或通过for属性关联input（例如<label for="email">邮箱</label><input id="email" required>） - CSS 写法：
label:has(input:required)::after { content: " *"; color: #d32f2f; margin-left: 4px; } - 兼容性注意：Chrome 105+、Firefox 121+、Safari 15.4+ 支持；IE 完全不支持，旧版 Safari（≤15.3）也不支持
- 如果表单含
select或textarea，需额外补充：label:has(select:required)::after、label:has(textarea:required)::after
兼容老浏览器的 fallback 方案（class + ::after）
当项目必须支持 Safari ≤15.3 或需要明确控制样式边界时，放弃 :has()，改用显式 class 标记。
立即学习“前端免费学习笔记（深入）”；
- HTML 中为必填项的
label添加class="required"：<label class="required" for="name">姓名</label> - CSS 写法：
label.required::after { content: " *"; color: #d32f2f; margin-left: 4px; } - 关键细节：
content值必须用引号包裹（" *"），否则无效；margin-left比margin-right更稳妥，避免和 label 内文本换行错位 - 无障碍注意：在
label上添加aria-hidden="true"会隐藏整个标签文本，绝对不可取；正确做法是保持星号视觉存在，并确保 label 文本本身已含“（必填）”语义，或由 screen reader 通过aria-required="true"读出状态
容易被忽略的三个细节
星号看似简单，但上线后常因以下三点出问题：
-
label和input的for/id不匹配，或用了嵌套结构（<label>姓名<input required></label>）却没适配选择器——label:has(input:required)在嵌套下仍有效，但label + input:required::before这类相邻兄弟选择器会失效 - 伪元素默认是
display: inline，若label设了display: flex或align-items: center，星号可能垂直偏移甚至被裁剪，必要时加vertical-align: middle或line-height: 1 - 表单重置（
<button type="reset">）后，:required状态仍存在，但某些浏览器（如旧版 Firefox）不会重新触发:has()重计算，此时星号可能残留或消失——这种边缘 case 需 JS 监听reset事件并手动刷新 class
