:required伪类本身不显示星号，因为它仅匹配必填控件而不生成内容；需配合::after等伪元素插入星号，且应作用于支持伪元素的容器（如label），而非input自身。
为什么 :required 伪类本身不显示星号
:required 只是匹配带有 required 属性的表单控件（如 <input required>），它不生成任何可见内容。想让星号“出现”，必须配合生成内容的伪元素，比如 ::after。直接写 input:required { content: "*"; } 是无效的——content 只在 ::before 和 ::after 中合法。
正确写法：用 ::after 插入星号并控制样式
核心是给 :required 元素的 ::after 添加内容，并确保该元素支持伪元素（<input> 默认不支持，需换为 <label> 包裹或改用 <input> 的父容器）：
label:has(> input:required) ::after {
content: " *";
color: #d32f2f;
font-size: 0.9em;
}
如果不能用 :has()（旧浏览器不支持），更兼容的写法是把 required 放在 <label> 上，或手动加 class：
- 推荐结构：
<label><span>姓名</span><input required></label>，然后写label input:required + span::before（需调整 HTML 顺序） - 更稳妥方案：给必填项的
<label>加class="required"，再写label.required::after - 注意：不要对
input:required::after尝试——<input>是替换元素，绝大多数浏览器不支持其伪元素
星号位置偏移与对齐常见问题
星号紧贴文字右侧时容易挤占空间或换行，尤其在小屏幕或缩放后。关键控制点：
立即学习“前端免费学习笔记（深入）”；
- 用
margin-left替代空格，例如content: "*"; margin-left: 4px; - 避免用
display: block或改变line-height，否则可能破坏表单行高一致性 - 若星号下坠，加
vertical-align: middle;到::after - 在 RTL 页面中，考虑用
direction: ltr;限定星号方向，防止被整体镜像
可访问性与语义注意事项
纯视觉星号对屏幕阅读器不可见，用户可能不知道字段必填。真正可靠的方式仍是保留 required 属性本身（它会被读出），星号只是辅助：
- 不要仅靠 CSS 星号暗示必填，
required属性必须存在 - 避免用
aria-label重复添加“（必填）”，会造成冗余播报 - 如需额外说明，用
<span class="visually-hidden">必填</span>配合 CSS 隐藏，比星号更明确
星号是视觉糖，不是逻辑开关；required 属性才是浏览器验证和辅助技术识别的唯一依据。
