必填星号对齐问题本质是防止星号破坏label文字流，常用解法为::before绝对定位配合padding-left预留空间；若未设padding-left，文字会因星号脱离文档流而视觉左塌陷；14px padding-left为经验值，确保所有label文字起始位置一致。
必填星号对齐问题，本质不是“怎么放星号”，而是“怎么不让星号破坏 label 文字流”——用 ::before 绝对定位是最常用解法，但必须配合 padding-left 预留空间，否则 label 文字会右移错位。
为什么 ::before 星号会导致 label 文字偏移？
直接给 .el-form-item__label::before 加 content: "*" 且不设 position: absolute，星号会作为行内内容插入，挤占文字左侧空间；若设了 position: absolute 却没给 label 本身留出左 padding，文字就直接顶到容器最左边，看起来像“向左塌陷”。
- 浏览器渲染时，绝对定位元素脱离文档流，但 label 原始宽度不变 → 文字起始位置没变，只是星号“浮”在左边
- 真实错位感来自视觉预期：你希望星号“贴着文字左边”，但实际它悬在 label 左边缘，而文字还按原位置渲染
- Element UI 默认没设
padding-left，所以常见现象是：必填项 label 文字比非必填项更靠右（因为星号占了视觉空间，但没预留）
padding-left + position: absolute 的配比怎么定？
核心是让所有 label 的文字起始位置一致，无论是否必填。关键参数不是星号宽度，而是“人眼感知的对齐基准线”。
-
.el-form-item__label { padding-left: 14px; position: relative; }—— 这个 14px 是经验值，覆盖星号+右侧间距，兼容多数字体大小 -
.el-form-item.is-required .el-form-item__label::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }—— 把星号钉在 padding 区域内垂直居中 - 不要用
width或max-width控制 label，否则 flex 布局下容易换行或挤压 input - 如果项目用了 rem 或动态字号，建议把
padding-left改为padding-left: 0.875rem（对应 14px），保持缩放一致性
React/Vue 动态表单里，::before 星号为啥有时不显示？
不是样式失效，而是 class 名没正确绑定。Element UI 的 is-required 类只在 rules 中声明了 required: true 且校验规则生效时才添加，纯 HTML required 属性不会触发它。
- Vue 模板中写
<el-form-item prop="name" :rules="{ required: true }"></el-form-item>才能确保is-required类存在 - React + Ant Design 或自研组件库，需确认对应 class 名（如
ant-form-item-required）是否被正确注入 - 调试时优先检查 computed class 列表，而不是只看 DOM 结构里有没有
*—— 星号是伪元素，DOM 里根本不存在 - 避免用 JS 动态增删
is-required类：class 切换会触发重绘，且可能和表单校验状态不同步
真正难的不是写几行 CSS，而是让“视觉对齐”和“语义可访问性”不打架——星号用 ::before 实现对齐，但 label 里仍得有真实 * 文本供读屏器读取；前者管眼睛，后者管逻辑，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
