星号应包裹在label内用span显式添加并绝对定位，left设为0配合label的padding-left和relative定位，垂直居中优先用top: 0.25em或flex布局，验证失败时通过js动态添加error类控制颜色。
星号用 ::before 伪元素定位会遮挡 label 文字
直接给 input 或 label 加 ::before 并设 position: absolute，很容易让星号压在 label 文本上——因为伪元素默认继承父容器的 line-height 和 font-size，且没有独立的布局上下文。
真正靠谱的做法是把星号提一层：用 label 包住 input 和一个显式 <span class="required">*</span>，再对这个 span 绝对定位。
绝对定位星号时 left 值不能写死为负数
写 left: -12px 看似简单，但一旦 label 字体变大、行高变化，或用了不同字体（比如中文字体比英文宽），星号就容易偏移甚至跑到输入框外侧太远。更稳的方式是依赖 label 的 padding-left 或 border-box 边界作为参考点：
- 给
label设position: relative和合适的padding-left（比如16px） - 给星号
span设position: absolute; left: 0; top: 50%; transform: translateY(-50%) - 确保
span的font-size和line-height与 label 一致，避免垂直错位
IE11 下 transform: translateY(-50%) 可能失效
IE11 对 transform 在绝对定位元素上的支持不完整，尤其当父容器有 line-height 或 vertical-align 干扰时，星号常偏高或偏低。稳妥替代方案是用 top: 0.25em 这类相对单位，配合 line-height 计算：
- 如果 label 的
line-height是1.5，font-size是14px，那中间位置 ≈(1.5 * 14) / 2 - (font-size / 2) = 7px - 直接写
top: 7px比transform更可控 - 或者改用
display: flex; align-items: center布局 label，星号放最前，再用margin-right: 4px隔开——这样根本不用绝对定位
表单验证失败时星号颜色要同步变化
只靠 CSS 控制必填态不够，用户提交失败后，星号得和错误提示保持视觉一致（比如变红）。纯 CSS 很难监听 JS 验证状态，所以推荐在 JS 校验逻辑里动态加 class：
- 验证失败时给对应
label加class="error" - CSS 写
label.error .required { color: #d32f2f; } - 别用
:invalid伪类驱动星号色——它只对input生效，且不反映业务层校验结果
星号的位置稳定性和状态同步，本质是布局层级 + 状态管理的组合问题。很多人卡在“为什么明明写了 left: 0 星号还是歪”，其实是忘了 label 自身有没有 position: relative，或者父容器有没有 overflow: hidden 把它裁掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
