:required伪类加::after不生效，因为input等替换元素不支持::after；应改用label:has(input:required)::after方案，并确保required属性存在以保障校验与无障碍支持。
为什么 :required 伪类加 ::after 不生效
因为 :required 只能匹配有 required 属性的表单控件（如 <input>、<select></select>、<textarea></textarea>），但这些元素默认是**替换元素（replaced element）**，不支持直接在内部插入 ::after 生成的内容。你写的 input:required::after { content: "*"; } 在绝大多数浏览器里压根不会渲染。
- 只有
display为inline、block或inline-block的非替换元素才支持::after -
input默认是inline-block，但它的内容区由浏览器控制，::after无法注入到标签内部视觉区域 - 常见错误现象：
::after写了没反应，或只在部分旧版 Safari 偶尔显示——那是 bug，不是标准行为
真正可靠的必填星号方案：用 label 包裹 + :has() 或属性选择器
把 required 属性移到 label 上，或利用 label[for] 和对应 input[id] 的关系，再用 :has() 定位——这是目前最干净、可维护性最强的做法。
- 推荐写法：
label:has(input:required)::after { content: " *"; color: #d32f2f; font-size: 0.9em; } - 兼容性注意：
:has()在 Chrome 105+、Firefox 103+、Safari 15.4+ 支持；如需兼容老 IE/旧 Edge，改用label[for$="name"]::after配合命名规范（如所有必填字段id以-required结尾） - 不要给
input加display: inline-flex后硬塞::after—— 星号位置飘忽、对齐难控，且破坏语义
::after 星号的颜色和定位怎么稳住不跑偏
颜色可以放心用 color，但位置必须脱离文档流或靠父容器约束，否则容易被输入框的 padding、line-height 或字体度量带偏。
- 加
vertical-align: middle或top: -0.1em微调垂直对齐（不同字体下表现不一） - 用
margin-left: 4px替代空格拼接，避免换行时星号掉到下一行 - 如果 label 是
display: flex，::after会变成 flex item，此时可用align-self: center对齐 - 禁止用
position: absolute给::after定位——它会脱离 label 文本流，读屏器可能忽略，且响应式缩放时错位
服务端校验和无障碍支持不能只靠 CSS 星号
CSS 星号只是视觉提示，既不改变表单提交逻辑，也不影响屏幕阅读器对必填状态的识别。
- 必须保留原生
required属性，否则checkValidity()失效、提交时无原生提示、AT（辅助技术）无法感知 - 别用
aria-required="true"替代required—— 它只是声明，不触发浏览器校验行为 - 如果用 JS 动态增删必填状态，记得同步操作
required属性本身，而不是只改 class 或样式
for/id 严格匹配，以及 :has() 的浏览器支持兜底策略。这两处一松，星号要么不出现，要么只在部分人眼里存在。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
