:required伪类本身不显示红星，仅匹配带required属性的控件；加红星需用label::after或额外dom，推荐语义化label关联+::after，兼容性不足时用class替代，避免input::after，动态场景需js补全。
为什么 :required 伪类本身不会显示红星
:required 只是匹配带有 required 属性的表单控件（如 <input required>），它不生成任何内容，也不改变样式——除非你主动写样式。直接写 input:required { color: red; } 没问题，但“加红星”得靠 ::after 或额外 DOM，而后者更可靠。
用 ::after 在 label 后插入红星的实操要点
最常见、语义清晰的做法是把红星加在 label 上，前提是 label 正确关联了 required 输入项（通过 for 或包裹）：
label:has(input:required)::after,
label input:required + label::after {
content: " *";
color: #e53935;
font-size: 1.2em;
}
但注意：:has() 在 Safari 15.4+ 和 Chrome 105+ 才稳定支持；若需兼容老浏览器，改用显式 class 更稳妥：
- 给
label加class="required"，再写label.required::after - 确保
label的for值与input的id严格一致 - 避免对
input:required::after尝试——<input>是替换元素，::after在多数浏览器中不生效
用 JavaScript 动态补全缺失的 required 标记场景
有些框架（如 Vue 表单库）或 CMS 输出的 HTML 可能漏掉 required 属性，仅靠 aria-required="true" 或后端校验逻辑。这时不能依赖 :required：
- 遍历所有
input[aria-required="true"]、select[aria-required="true"] - 查找其最近的
label（用closest('label')或document.querySelector(`label[for="${el.id}"]`)） - 向该
label插入一个带class="asterisk"的<span></span>，再用 CSS 控制样式 - 避免重复添加：检查
label是否已含.asterisk
红星位置偏移、换行错位的典型原因
加完 ::after 后红星跑到下一行、或紧贴文字无空隙，通常因为：
-
label是块级元素（如设了display: block），导致::after换行——改用display: inline-flex或保留默认inline -
content: "*"缺少空格，和文字挤在一起——写成content: " *"或用margin-left: 4px - 父容器有
white-space: nowrap限制，但label内容过长——优先保证可读性，必要时允许折行 - 使用
font-family不一致（如系统字体 vs 字体图标），导致星号大小/基线异常——统一用 Unicode 星号（*），别用\2605等图标码点
真正麻烦的不是加红星，而是让红星在各种表单布局（水平排列、网格、响应式折叠）里始终对齐、不溢出、不遮挡输入框右侧图标——这往往需要配合 position: relative 和微调 top 或 transform。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
