必填项红星应紧贴标签文字，推荐用label::before加Unicode星号（如\204e）并设vertical-align:middle；需通过input[required]+label或JS动态添加required类实现精准绑定，避免全局污染与渲染异常。
必填项的红星必须紧贴标签文字，不能靠margin硬推
直接给 label 加 ::before 并设置 content: "*" 是最常用做法，但容易忽略垂直对齐问题。默认星号会和文字基线错位，看起来悬空或下沉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
::before加vertical-align: middle或vertical-align: baseline（取决于字体渲染），比用margin-top更稳定 - 避免用
display: block，否则星号会换行；保持display: inline（默认值） - 加
color: red和font-size: 1.2em让星号更醒目，但别设font-weight——*字符本身不响应粗体
如何只对带required属性的input生效，避免全局污染
不能无差别给所有 label 加星号，得绑定到实际必填控件上。推荐用属性选择器联动：当 input[required] 存在时，定位其前一个兄弟 label，或用 for 属性匹配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- HTML 中确保
label和input有正确关联（for="id"+id匹配，或包裹关系） - CSS 写成：
input[required] + label::before（相邻兄弟）或label[for]::before配合 JS 动态加 class 更可控 - 纯 CSS 无法“反向查询”
label对应的input是否 required，所以依赖 DOM 结构顺序或 JS 辅助是现实选择
content里写*还是\204e？Unicode星号更稳妥
直接写 content: "*" 在多数场景没问题，但在某些字体或缩放比例下，* 可能被渲染得过细、偏小，甚至被截断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用 Unicode 星号：
content: "\204e"（双星号符号，视觉更饱满）或"\002a"（标准星号的十六进制写法） - 避免用
\2605（★），它属于装饰性符号，语义不符，且可能触发屏幕阅读器误读 - 如果项目支持 CSS 变量，可定义：
--required-star: "\204e";，便于统一替换和主题切换
表单动态增删字段时，红星没同步出现？JS得补一刀
CSS 的 ::before 是静态的，不会监听 DOM 变化。通过 JS 动态插入的 input[required]，其关联 label 不会自动获得星号，除非你手动触发样式重计算或加 class。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖纯 CSS 实现动态必填态；给必填
label加一个class="required"，CSS 写label.required::before - 插入新字段后，立刻执行：
newLabel.classList.add("required") - 若用框架（如 React），在 render 阶段根据
requiredprop 控制 className，比依赖属性选择器更可靠
