用伪元素+绝对定位实现label后加*且不破坏对齐：label.required需设position:relative和padding-right预留空间，::after添加星号并用clip技巧隐藏以保无障碍；同时统一设置label与input的vertical-align:middle确保垂直对齐。
label 后加 * 但不破坏文本对齐
直接在 label 文本末尾写 * 最简单，但会导致视觉错位：中文字符和星号字宽不同，尤其在等宽字体或固定宽度布局里，多个 label 长度不一时，冒号/输入框起始位置会参差不齐。
真正稳的方案是用伪元素 + 绝对定位：
label.required::after {
content: "*";
color: #d32f2f;
margin-left: 4px;
font-size: 1.2em;
vertical-align: middle;
}
label.required {
position: relative;
padding-right: 16px; /* 预留空间，防星号遮挡文字 */
}
关键点：
-
position: relative是必须的，否则::after的position: absolute会相对于 body 定位 -
padding-right比单纯靠margin-left更可靠——避免星号紧贴长文本末尾、被截断或换行 - 不用
vertical-align: top/bottom，容易和 input 高度失配；middle对齐基线更稳
input 和 label 垂直居中对齐总出问题
常见表现：label 看着比 input 高半行，或者 checkbox/radio 左侧图标和文字不对齐。根本原因是表单控件默认 vertical-align 是 baseline，而文字基线和控件视觉中心不重合。
统一做法（推荐）：
label,
input,
select,
textarea,
button {
vertical-align: middle;
}
/* 特别处理 checkbox/radio：它们需要 inline-block + 对齐 */
input[type="checkbox"],
input[type="radio"] {
vertical-align: middle;
margin-top: -2px; /* 微调，抵消默认上边距 */
}
注意：
- 不要只给
input设vertical-align，label 必须同步，否则相对位置仍乱 -
margin-top: -2px不是魔法数字——它对应大多数浏览器 checkbox 默认margin的上边距偏差，实测比margin-bottom更可控 - 如果用了自定义 checkbox 样式（比如用
::before重绘），那这个微调就不用了
必填标识要支持屏幕阅读器但又不能影响视觉布局
纯 CSS 星号对视障用户不可见，aria-required="true" 又不传达“已标星”的视觉反馈。得兼顾两者。
正确写法：
<label for="name" class="required">姓名</label> <input id="name" name="name" required aria-required="true">
然后用 CSS 控制星号仅对视觉有效：
label.required::after {
content: "*";
color: #d32f2f;
/* 下面这三行确保读屏器跳过星号 */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
重点：
- 别用
display: none或visibility: hidden—— 这会让读屏器完全忽略该元素，星号语义丢失 - 这套“1px clip”方案是 WCAG 推荐的隐藏辅助文本方式，既不占布局空间，又保留言语可访问性
-
aria-required="true"要写在input上，不是label上，否则部分读屏器不识别
响应式下星号换行或挤压输入框
小屏幕时，label 文字变长，padding-right 预留空间不够，星号可能被挤到下一行，或把 input 挤出容器。
解法分两层：
- 给
label加white-space: nowrap防止星号单独换行（前提是 label 内容本身不太长） - 更通用的做法：用
flex布局隔离 label 和 input
<div class="form-row"> <label for="email" class="required">邮箱</label> <input id="email" name="email" required> </div>
.form-row {
display: flex;
align-items: center;
gap: 8px;
}
.form-row label {
flex: 0 0 auto; /* label 不伸缩，宽度由内容定 */
}
.form-row input {
flex: 1; /* input 占满剩余空间 */
}
这样无论屏幕多窄，label 和 input 始终水平排列，星号不会掉队，input 也不会溢出。
最后提醒一句：所有这些对齐细节，在 Safari 15.4 之前对 flex + vertical-align 组合有渲染 bug，如果必须兼容老 Safari，优先用 grid 替代 flex，或者降级为 inline-block + 显式 vertical-align。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
