最推荐用 label.required::after 添加星号，语义清晰、可控性强、支持动态操作和无障碍；需配合 aria-hidden: true 及对齐、颜色、响应式等细节优化。
直接用 ::after 伪元素给必填表单项的标签加星号，是最干净、语义好又不污染 HTML 的方式。
确保 label 正确绑定 input
星号要加在 label 上，前提是 label 和 input 有正确关联（用 for 属性或嵌套）：
<label for="name">姓名</label><input id="name" required>- 或者
<label>姓名<input required></label>
这样样式才能稳定作用在视觉标签上，而不是靠 JS 动态加类。
用 :required + ::after 组合精准控制
不推荐给所有 label 加星号，而是只对「带 required 属性的表单控件对应的 label」生效：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 先选中带
required的 input/textarea/select - 再用
label[for="xxx"]::after或相邻兄弟选择器label + input[required]::before—— 但更推荐反向：用input[required]:not([type="hidden"])配合label[for]显式匹配 - 实际常用写法（简洁可靠）：
label[for] input[required]:not([type="hidden"]) {
/* 隐藏原生星号或校验逻辑 */
}
label[for]::after {
content: " *";
color: #e74c3c;
font-size: 0.9em;
vertical-align: middle;
}
/* 但这样会全加 —— 所以更推荐加 class 控制 */
推荐做法：用 .required 类 + ::after（兼顾语义与可控性）
HTML 中给需要星号的 label 加一个 class="required"，CSS 只响应这个类：
<label class="required" for="email">邮箱</label>- CSS 写成：
label.required::after { content: " *"; color: #d32f2f; } - 优势：不依赖 DOM 结构、不误伤非表单 label、支持 JS 动态增删、方便全局换主题色
- 可进一步加无障碍支持：
label.required::after { aria-hidden: true; }（不过 content 是纯装饰，通常无需额外处理）
细节优化：对齐、颜色、可访问性
星号默认容易和文字错位或太扎眼，建议微调：
- 用
vertical-align: top或middle对齐文字基线 - 避免用
color: red—— 色弱用户难识别，搭配图标或文字提示更稳妥（如aria-label="必填项"） - 小屏幕下可设
font-size: 0.85em防止撑开行高 - 如果项目支持深色模式，记得同步定义暗色下的星号颜色
基本上就这些。不复杂但容易忽略对齐和可访问性，加个类再配 ::after，稳又灵活。
