推荐用 inline-flex 布局：label.required { display: inline-flex; align-items: center; }，::after 显式设 color 并加 margin-left；需配合 aria-required 保证可访问性，避免 content 含语义文本。
怎样让 ::after 星号出现在表单控件右侧而不是文字末尾
直接给 label 加 ::after 会把星号插在 label 文本最后，但多数设计要求星号紧贴输入框右侧（比如 input 右侧）。这时候不能依赖 label 文本流位置，得用定位或 flex 布局控制。常见错误是只写 content: "*" 却没处理布局，导致星号跑偏或换行。
推荐做法：给 label 设 display: inline-flex; align-items: center;，再让 ::after 作为弹性子项存在：
label.required::after {
content: "*";
color: #f00;
margin-left: 4px;
}
这样星号始终和 label 文本对齐，且不会因文本换行而错位。
为什么 content: "*" 在某些浏览器里不显示红色
CSS 的 ::after 伪元素默认继承父元素的 color，但部分老版本 Safari 或 IE 会忽略继承，或把伪元素当成独立文本节点处理。最稳妥的方式是显式声明颜色，而不是依赖继承：
立即学习“前端免费学习笔记（深入）”；
- 别写
label.required { color: #f00; }然后指望::after自动变红 - 必须写
label.required::after { content: "*"; color: #f00; } - 如果 label 本身有深色文字（如
#333），不设color就可能显示成灰色星号
如何避免必填星号被屏幕阅读器重复朗读
视觉上的星号只是提示，语义上它不属于 label 内容，不该被读屏软件当作有效文本播报。否则用户听到 “姓名星号” 就很奇怪。
解决方案是加 aria-hidden="true" 到伪元素不可行（伪元素不能加属性），所以得靠 aria-label 或 aria-required 显式表达必填语义：
<label for="name" aria-required="true">姓名</label> <input id="name" required />
同时确保 ::after 不含可访问内容：
- 不要用
content: "（必填）"这类可读字符串 - 保持
content: "*"，它本身无语义，配合aria-required才完整 - 若用字体图标（如
content: "\2605"），也要注意 Unicode 字符是否被读屏识别为“星号”
用 content 插星号时容易漏掉的兼容性细节
content 属性只在 ::before 和 ::after 中生效，且必须配合 display（默认是 inline），但某些场景下仍会失效：
- 父元素设了
display: none→ 伪元素完全不渲染 - 父元素是
input、textarea等替换元素 →::after无效（它们不支持伪元素） - 想给
input直接加星号？只能套一层div或改用label包裹 - IE8 及更早不支持
::after（双冒号语法），如需兼容得降级为:after单冒号，但现代项目基本不用考虑
真正容易被忽略的是：星号大小随父元素 font-size 缩放，如果 label 文字用了 rem，星号也会跟着变；需要固定大小就加 font-size: 12px; 或用 transform: scale(0.8); 微调。
