能实现但需绕开限制：原生button不支持::after伪元素，应改用子元素（如span.spinner）承载旋转动画，并兼顾无障碍、性能与暗色模式适配。
按钮加载状态怎么用 ::after 实现旋转动画
直接上结论：能实现，但得绕开一个关键限制——::after 伪元素默认不渲染在替换元素（如 <button>）上，除非你把它变成非替换的容器。所以不能直接给原生 <button> 加 ::after 动画，必须改结构或换思路。
为什么原生 <button> 上 ::after 不生效
浏览器对 <button> 这类替换元素的伪元素支持很保守：::before 和 ::after 在多数引擎里被忽略，尤其当按钮有默认 UA 样式时。你写上去了，DevTools 里可能看到样式，但实际不渲染。
- Chrome/Firefox/Safari 都存在该行为，不是 bug，是规范允许的“可选支持”
- 即使强行触发（比如加
position: relative），动画也常卡顿或错位 - 移动端 WebView 兼容性更差，部分内核直接跳过渲染
真正可用的两种做法（推荐后者）
方案一：把 <button> 换成 <div role="button"> 或 <span>，手动补交互逻辑和可访问性属性；方案二：保留原生 <button>，但用子元素承载动画——这才是稳妥解法。
- 用
<span class="spinner"></span>作为子节点，配合display: inline-block+vertical-align: middle对齐 - CSS 动画写在子元素上，避免依赖伪元素
- 加载中时用 JS 切换
disabled属性 + 添加loading类名控制显隐 - 示例关键代码：
.btn.loading .spinner { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
旋转动画性能与可访问性容易被忽略的点
很多人只顾转得顺，却忘了用户正在操作。几个硬伤常被跳过：
立即学习“前端免费学习笔记（深入）”；
- 没加
prefers-reduced-motion媒体查询，导致动画对眩晕用户不友好 - 旋转图标没设置
aria-hidden="true"，屏幕阅读器会读出“空白”或“旋转中”，干扰语义 - 用
transform: rotate()没配will-change: transform，低端安卓机掉帧明显 - 颜色对比度不够，比如灰底白旋钮，在暗色模式下直接看不见
复杂点不在怎么转，而在怎么让转得“不打扰、不误导、不卡顿”。动效只是表层，背后是交互状态管理、无障碍声明、性能兜底三件事绑在一起做。
