:required伪类本身不生成内容，无法直接显示星号；必须配合::after/::before及content属性，且目标元素需支持伪元素（如label或特定父容器），而input:required::after无效因其为替换元素。
为什么 :required 本身不会显示星号
:required 只是一个匹配状态的伪类，它不生成内容，也不能直接插入符号。想“自动添加星号”，必须配合 ::after 或 ::before 伪元素 + content 属性，且目标元素得支持伪元素（即：必须是可渲染的、非替换元素，或部分替换元素如 input[type="text"] 等）。
常见误区是给 input 直接加 ::after——但多数 input 是替换元素，::after 在标准下**不渲染**（Chrome/Firefox 都不支持），所以星号不会出现。
- ✅ 正确做法：把星号加在
label上，前提是label显式关联了required的表单控件（例如for属性或包裹关系） - ✅ 替代做法：用
input的父容器（如div.form-field）承载伪元素，再通过结构选择器定位 - ❌ 错误写法：
input:required::after { content: "*"; color: red; }—— 这行代码无效，别试
用 label:has(> :required) 实现真正自动关联
现代 CSS 支持 :has()，可以精准定位“内部包含必填控件”的 label。这是目前最接近“自动”的方案，无需额外 class，也不依赖 DOM 顺序是否严格包裹。
注意：:has() 在 Safari 15.4+、Chrome 105+、Firefox 121+ 可用；若需兼容旧浏览器，得降级为 JS 或手动加 class。
立即学习“前端免费学习笔记（深入）”；
label:has(> :required) ::after {
content: " *";
color: #d32f2f;
font-size: 0.9em;
vertical-align: middle;
}
- 星号前留空格，避免紧贴文字难读
- 用
vertical-align: middle让星号和文字基线对齐，而不是悬在顶部 - 如果 label 内有其他内联元素（如
span描述），:has(> :required)要求:required是 label 的**直接子元素**；若结构是label > div > input:required，就得改成label:has(:required)（去掉>），但会略微降低精度
兼容旧浏览器的稳妥 fallback 方案
当项目需支持 Chrome 104-、Safari 15.3- 或 Firefox 120- 时，:has() 不可用，推荐用属性选择器 + 显式标记组合：
label[for] :required,
label > :required {
/* 仅用于触发样式逻辑，不直接加星号 */
}
<p>label[for$="required"]::after,
label.required::after {
content: " *";
color: #d32f2f;
}
- 手动给 label 加
class="required"或命名for="name-required"，虽不是完全自动，但比每个 input 都写 JS 更轻量 - 避免用
[required]直接选 input——因为required是布尔属性，input[required]可以选中，但它没法向上影响 label；必须由 label 主动携带标识 - 如果用 JS 动态插入星号，务必监听
DOMSubtreeModified或MutationObserver，否则动态生成的表单字段会漏掉
星号位置错乱？检查这些隐藏细节
即使代码写对，星号也可能偏高、偏左、换行或被截断——问题往往不在 :required，而在布局上下文。
- 如果 label 是
display: flex，::after默认变成 flex item，需加align-self: center对齐 - 如果 label 设了
line-height: 1或font-size: 0（常见于图标方案），星号可能消失或缩成点，建议显式设font-size和line-height - 某些 CSS 重置库（如 normalize.css）会清除
label::before/::after的默认行为，确认未被content: none覆盖 - 星号用 Unicode
\204E（※）或\002A（*）均可，但前者更醒目；避免用图片或 SVG，增加请求和维护成本
真正麻烦的从来不是加星号，而是让星号在各种 label 排版、字体缩放、RTL 文本、高对比度模式下都稳稳待在该在的位置——这时候，:has() 解决了“选谁”，但“怎么摆”还得靠你盯着 DevTools 一点点调 margin 和 transform。
