可用按钮的::after伪元素纯CSS实现动态进度线，通过绝对定位、width动画及hover/active等伪类触发，无需新增DOM或JS。
可以直接用按钮的 ::after 伪元素模拟动态进度线，不新增 DOM 节点，纯 CSS 实现。
用 ::after 绘制底部横线进度条
把按钮设为相对定位，::after 绝对定位在底部，宽度从 0% 动画到 100%，高度设为 2px 即可模拟进度线。
- 按钮需加
position: relative -
::after设置content: ""、position: absolute、bottom: 0、left: 0 - 动画用
width+transition或@keyframes控制伸展过程
触发时机：hover / focus / active 状态下启动
不需要 JS，直接用伪类控制显示和动画。例如悬停时显示进度线：
button:hover::after { width: 100%; }- 默认状态设
width: 0，并加transition: width 0.4s ease - 若要点击后保持进度（如加载中），可用
:active或配合 JS 切换自定义 class（如.loading）
进阶：斜向扫光或渐变色进度效果
用 background 配合 transform: scaleX() 或线性渐变背景 + 位移动画，能做出更精致的效果：
立即学习“前端免费学习笔记（深入）”；
- 渐变背景：
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%) - 配合
transform: translateX(-100%)和animation模拟流动感 - 注意重置
transform-origin避免缩放偏移
基本上就这些 —— 不增加 HTML，不依赖 JS，靠伪元素和 CSS 动画就能实现干净可控的按钮进度反馈。
