用::after实现进度条需设content:""、父容器position:relative、伪元素position:absolute并控制width动画；JS不能直接操作伪元素，应通过class切换或CSS变量动态更新宽度。
进度条用 ::after 实现，核心是控制宽度动画
直接说结论：用 ::after 伪元素做进度条，本质是让它作为子层盖在容器上，靠 width + transition 或 @keyframes 动起来。不是“加个伪元素就自动动”，得手动绑定状态变化。
常见错误是把 ::after 写成块级但没设 content: ""，或者忘了给父容器设 position: relative，导致伪元素定位飘走。
-
::after必须有content: ""，否则不渲染 - 父容器建议设
position: relative，::after设position: absolute，这样宽度变化才可控、不挤内容 - 动画触发靠改父元素的 class（比如
.progress-60），别试图用 JS 直接改伪元素的width—— 伪元素没法被 JS 选中
怎么让 ::after 宽度随进度实时变化
不能靠 JS 操作伪元素，得用 CSS class 控制。典型做法是预设多个 class，每个对应一个宽度值；或用自定义属性（--progress）配合 calc() 动态算宽。
兼容性要注意：CSS 变量 + calc() 在 IE 完全不支持，如果还要兼容 IE，只能走 class 切换路线。
- 推荐写法：
.progress::after { width: calc(var(--progress, 0) * 1%); }，JS 改element.style.setProperty('--progress', 75) - class 方案示例：
.progress-45::after { width: 45%; }，适合固定档位（如 0/25/50/75/100） - 别用
max-width代替width—— 动画不会平滑，会卡顿或跳变
transition 和 @keyframes 选哪个
过渡动画（transition）更轻量，适合由 JS 触发的状态切换；关键帧（@keyframes）适合纯 CSS 自启动、循环或复杂节奏的加载效果。
容易踩的坑是给 ::after 加了 transition，但父元素 class 没变，或者改的是别的属性（比如 height），结果宽度完全不动。
- 用
transition：确保只对width做过渡，写成transition: width 0.3s ease，别简写成transition: all - 用
@keyframes：适合模拟“加载中”这种无具体数值的场景，比如@keyframes loading { 0% { width: 0; } 100% { width: 100%; } } - 动画性能提示：宽度变化触发 layout，但现代浏览器对
transform: scaleX()更友好；如果追求高帧率，可考虑用transform替代width
为什么有时候 ::after 看不见或错位
伪元素默认是 inline 类型，没设 display 就算有 width 也不生效；另外 z-index、背景色、父容器 overflow 都可能让它“消失”。
最常被忽略的是：父容器没设高度，::after 的 top/left/bottom/right 值失去参照，导致位置不可控。
- 必须设
display: block或inline-block才能用width/height - 如果父容器
overflow: hidden，而::after宽度初始为 0，动画开始前可能被裁掉第一帧 - 背景色记得加，不然宽度变了也看不见 ——
background: #007bff这种基础色别省 - 调试技巧：临时加
border: 1px solid red到::after，一眼看清它在哪、有多大
实际项目里，真正难的不是写出来，而是让进度值和 UI 同步更新——JS 设置完 --progress，得确认样式已应用，尤其在异步回调或 React/Vue 的响应式更新边界里，容易出现“值改了，但动画没动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
