bootstrap 表单必填项星号需用 css 伪元素或服务端渲染实现，避免硬编码、破坏无障碍和 ssr 闪动；推荐 label::after + aria-hidden 或服务端直接输出星号。
bootstrap 表单必填项星号标记不生效？先确认你用的是哪套 css 规则
bootstrap 本身不自动给 required 表单项加星号，它只提供 required 属性的语义和基础校验逻辑。星号是纯视觉提示，得自己加——但别硬塞 * 到 label 里，否则无障碍（screen reader）和国际化会出问题。
正确做法是用 CSS 的 ::after 伪元素配合属性选择器，只对带 required 的表单项生效：
label[for] > input[required] + span::after,
label > input[required] + span::after,
label > select[required] + span::after,
label > textarea[required] + span::after {
content: " *";
color: #dc3545;
}
注意：上面规则依赖 HTML 结构中 input 后紧跟一个 span（比如 Bootstrap 的 form-text 或空占位），更稳妥的方式是直接作用于 label 本身：
label[for] > input[required]::before,
label > input[required]::before {
content: "* ";
color: #dc3545;
margin-right: 4px;
}
但这样会破坏 label 文本流顺序，推荐下一种写法。
用 aria-required + data-required 避免样式和语义冲突
Bootstrap 5+ 推荐用 aria-required="true" 做语义标注，同时用自定义属性触发样式，避免和原生 required 校验逻辑打架（比如某些表单库会重写验证流程，删掉原生 required）。
-
required属性仍保留，保证浏览器默认校验行为 - 在 label 内部手动加一个
<span class="text-danger" aria-hidden="true">*</span>，并用aria-hidden="true"防止读屏软件重复播报 - 或者统一用 JS 批量注入星号：
document.querySelectorAll('label[for]').forEach(el => { if (el.querySelector('input[required], select[required], textarea[required]')) { el.innerHTML += ' <span class="text-danger" aria-hidden="true">*</span>'; } });
这样既保持可访问性，又让星号位置可控，不会因 Bootstrap 版本升级或 form-control 类变化而错位。
Bootstrap 4 和 5 的 form-label 类会影响星号定位
Bootstrap 5 把 .form-label 设为 display: inline-block，而 Bootstrap 4 是 display: block。如果你用 ::after 加星号到 label.form-label 上，4 和 5 下的换行、对齐表现可能不一致。
解决办法是显式重置 display 并控制内联行为：
label.form-label[for]::after,
label.form-label > input[required]::before {
content: "*";
color: #dc3545;
margin-left: 4px;
display: inline;
}
关键点：
- 别依赖
form-label的默认 display，显式设display: inline或inline-flex - 用
margin-left而非padding，避免影响 label 整体宽度计算 - 如果用了
col-form-label（栅格化 label），要额外加权重：label.col-form-label.form-label::after
React/Vue 项目里动态加星号容易漏掉服务端渲染场景
在 SSR（如 Next.js、Nuxt）里，JS 还没执行时，label 就该有星号，否则首屏会闪动。不能只靠 useEffect 或 mounted 注入。
推荐方案：
- 服务端模板里就判断字段是否 required，直接输出带星号的 label（如
<label>用户名 <span class="text-danger" aria-hidden="true">*</span></label>） - 组件 props 显式传
required布尔值，由组件决定是否渲染星号 span，而不是靠 DOM 查询 - 避免用
querySelector查找required属性——SSR 时 DOM 不存在，且 React 的ref在首次渲染时也拿不到真实节点
最稳的方式是把「是否必填」作为业务字段元信息，和 label 文本一起管理，而不是把它当成 UI 衍生状态。
星号看着小，但牵扯到语义、样式继承、框架生命周期、服务端渲染，最容易在改版或换框架时悄悄失效。
