:required 本身不渲染视觉内容，无法直接通过 ::after 在 上添加红星，因其是替换元素；需绑定到 或用 JS 动态插入星号并确保可访问性。
为什么 :required 本身不会显示红星
:required 只是一个状态伪类，它只用于匹配带 required 属性的表单控件（如 <input required>），但**不负责渲染任何视觉内容**。直接写 input:required { color: red; } 可以改颜色，但想“追加”一个红星（即在标签文字后、输入框旁动态插入内容），必须借助 ::after 或 ::before 伪元素——而它们**不能直接作用在替换元素（如 <input>、<textarea></textarea>）上**。
所以常见错误是这样写然后发现没效果：
input:required::after {
content: " *";
color: #f00;
}
这行不通，因为 <input> 不支持 ::after。
真正可行的两种方案：绑定到 <label></label> 或包裹容器
核心思路是把伪元素加在**能渲染伪元素的非替换元素**上。最稳妥的做法是让每个必填项都有明确关联的 <label></label>，并利用 for 和 id 绑定：
立即学习“前端免费学习笔记（深入）”；
- 确保
<input>有id，且对应<label for="xxx"></label> - 用属性选择器定位「关联必填输入框」的
<label></label>，例如：label[for="name"]:has(+ input:required)（需现代浏览器支持:has()） - 更兼容的写法是给
<label></label>加 class，或把required属性同时写在<label></label>上（语义稍弱但可控）
推荐做法（兼容性好、语义清晰）：
<label for="email">邮箱</label> <input type="email" id="email" required>
label[for="email"] input:required + label::after,
label[for="email"]:has(input:required)::after {
content: " *";
color: #d32f2f;
font-size: 1.2em;
vertical-align: middle;
}
但注意：:has() 在 Safari 15.4+ 和 Chrome 105+ 才稳定支持；若需兼容旧版，建议用 JS 补充或改用以下更保守方式。
用 JS 辅助补全兼容性缺口（轻量且可靠）
纯 CSS 在老浏览器中无法反向从 input:required 影响其前一个 <label></label>，这时只需几行 JS 就能精准打标：
document.querySelectorAll('input[required]').forEach(el => {
const label = el.labels?.[0] || document.querySelector(`label[for="${el.id}"]`);
if (label && !label.hasAttribute('data-required-star')) {
label.innerHTML += ' <span style="color:#d32f2f;">*</span>';
label.setAttribute('data-required-star', '');
}
});
这段代码安全、无依赖、只运行一次，且不会重复添加。关键点：
- 优先用
el.labels（原生 API，返回所有关联<label></label>） - 回退到
label[for]查询，要求input必须有id - 用
data-required-star防止多次执行时重复插入 - 不用
::after是为了绕过伪元素限制，也方便后续用 JS 控制显隐
别忽略可访问性与样式细节
单纯加个视觉红星不够，屏幕阅读器用户需要知道这是必填项。正确做法是：
- 保留
required属性（它本身就被读屏器识别） - 避免仅用颜色传达信息（比如只红不加文字），可额外加
aria-label或隐藏文本 - 如果用
span插入星号，建议加aria-hidden="true"，防止读屏器重复读“星号” -
vertical-align: middle要配合line-height或font-size调整，否则在某些字体下会偏高或偏低
真正容易被忽略的是：当表单支持动态增删字段时，JS 方案必须监听新增节点并重新打标，而 CSS :required 会自动生效——所以混合使用时，要明确哪些场景靠 CSS、哪些靠 JS 补位。
