html5中required属性不直接渲染星号，需用:required伪类配合::after添加红色星号；推荐将星号置于label上并用:has()选择器实现语义化与可访问性，旧浏览器可用js降级方案。
在 HTML5 中，required 属性本身不直接渲染星号，但可以结合 :required 伪类与 CSS 的 ::after 伪元素，在必填表单项旁自动添加红色星号，无需手动写 * 标签。
基础实现：用 :required + ::after 插入星号
给所有带 required 属性的表单控件（如 input、select、textarea）设置 ::after，插入内容并样式化：
input:required,
select:required,
textarea:required {
position: relative;
}
input:required::after,
select:required::after,
textarea:required::after {
content: "*";
color: #e32;
font-weight: bold;
margin-left: 4px;
}
⚠️ 注意：必须为元素设 position: relative（或其他非 static 值），否则 ::after 在部分浏览器中可能定位异常或不显示。
更稳妥的写法：避免影响布局和可访问性
直接在控件后加伪元素容易干扰行高或换行。推荐将星号放在标签（label）上，语义更清晰，也利于屏幕阅读器理解：
- 确保每个表单控件都有对应
label[for]或包裹式label - 只对带
required的label添加星号 - 用
display: inline-flex或vertical-align: middle对齐星号
label:has(> input:required),
label:has(> select:required),
label:has(> textarea:required) {
display: inline-flex;
align-items: center;
}
label:has(> input:required)::after,
label:has(> select:required)::after,
label:has(> textarea:required)::after {
content: "*";
color: #e32;
margin-left: 4px;
font-size: 1.2em;
}
✅ :has() 是现代 CSS（Chrome 105+、Firefox 121+、Safari 15.4+ 支持），语义准确，且星号随标签一起被读屏软件朗读为“必填”提示的一部分。
兼容旧浏览器的降级方案
若需支持不支持 :has() 的老版本浏览器（如旧版 Edge 或 IE），可改用 JavaScript 动态添加类，再用 CSS 渲染星号：
<label for="name" class="required">姓名</label> <input id="name" required>
label.required::after {
content: "*";
color: #e32;
margin-left: 4px;
}
或用脚本自动标记：
document.querySelectorAll('input[required], select[required], textarea[required]')
.forEach(el => {
const label = el.labels?.[0] || document.querySelector(`label[for="${el.id}"]`);
if (label) label.classList.add('required');
});
增强体验：聚焦时高亮星号或加动画
提升交互反馈，例如聚焦时让星号轻微放大或变色：
label:has(> input:required:focus)::after,
label:has(> select:required:focus)::after,
label:has(> textarea:required:focus)::after {
transform: scale(1.2);
transition: transform 0.2s ease;
}
也可配合 :invalid:not(:placeholder-shown) 在用户输入错误时强化提示，但星号本身建议始终可见，以明确初始必填状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
