最稳妥的方式是用 css 伪元素配合属性选择器，即 [required]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])::after 添加星号，兼顾语义、无障碍与维护性。
怎么让 required 字段旁边自动显示星号（*）
浏览器原生不渲染 required 的视觉提示，必须手动加。最稳妥的方式是用 CSS 伪元素配合属性选择器，不依赖 JS 或额外 HTML。
- 用
[required]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])::after精准匹配文本类输入框，避免 checkbox/radio 被误加 - 星号颜色建议用
color: #d32f2f（Material Design 推荐的必填红），别用纯黑或纯红，可读性差 - 加
margin-left: 4px和vertical-align: middle对齐文字基线，否则星号会“飘”在字母上方 - 别用
content: "*"硬写，而要用content: " *"（前面带空格），否则和 label 文字挤在一起
label 里写星号 vs CSS 伪元素，哪个更靠谱
手写 * 在 <label></label> 里看似简单，但维护成本高、语义混乱、响应式易错位；CSS 伪元素才是正解。
- 手写星号会让屏幕阅读器把
*当作内容朗读（“姓名星号”），干扰无障碍体验；伪元素默认不被读取 - 换主题时，手写星号要全局搜替换；CSS 只改一处样式即可生效
- 如果 label 是动态生成（比如 Vue/React 的
v-for渲染），手写星号容易漏加或重复加 - 注意：伪元素对
<input type="file">和<textarea></textarea>同样有效，无需额外判断
为什么用了 ::after 却没显示星号
常见原因不是语法错，而是 CSS 优先级或 display 类型冲突。
-
input默认是display: inline，但若父容器设了display: flex且子项没设align-items，伪元素可能被裁剪或错位 - 某些重置 CSS（如 normalize.css）会把
input设为display: block，此时::after不生效——需显式加display: inline - 检查是否误用了
::before（星号跑 label 前面去了），或者写了:after（少一个冒号，IE 旧写法已淘汰） - 若 input 套在
<div class="form-group"> 里，别给 div 加 <code>required属性——浏览器只认表单控件自身的required兼容老版本 IE（比如 IE11）要注意什么
IE11 支持
[required]::after，但有三个隐藏雷区。立即学习“前端免费学习笔记（深入）”；
- IE11 不支持对
<input type="email">这类语义化类型使用[required]选择器——得退回到[required="required"] - 伪元素在 IE 中默认不继承父元素字体大小，必须显式写
font-size: inherit - 若项目用了 postcss 或 autoprefixer，确保没把
::after错转成:after（IE10- 可能降级失败） - 测试时别只看 Chrome，用真实 IE11 虚拟机或 BrowserStack 验证，DevTools 模拟 UA 不可靠
事情说清了就结束。真正麻烦的不是加星号，而是让星号在所有表单组合（label+input、fieldset+legend、aria-labelledby 关联）、所有屏幕尺寸、所有辅助技术下都保持语义正确且视觉稳定。
- IE11 不支持对
