求助：圆形进度组件hover状态无法完成圆环的实现方案

你的代码核心问题是hover时将::after伪元素的边框直接设为0，导致圆环的左侧部分缺失，无法形成完整圆环。另外两个伪元素的动画衔接逻辑也没有配合好，没法实现完整的圆环绘制效果。

我们可以调整两个伪元素的动画逻辑，让::before负责绘制上、右、下三个方向的边框，::after负责补全左侧边框，同时通过动画同步两者的状态：

button {
    border: 6.429px #f1f1f1 solid;
    position: relative;
    background: white; /* 添加背景避免伪元素遮挡内部文字 */
    cursor: pointer;
}

.current-step {
    font-size: 24.442px;
    position: relative; /* 让文字层级高于伪元素 */
    z-index: 1;
}
  
button::before,
button::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.spin {
    height: 66px;
    width: 65px;
    padding: 0; /* 去掉按钮默认内边距，避免文字偏移 */
}

.spin::before,
.spin::after {
    top: -6.429px; /* 用精确的边框宽度值，避免偏移 */
    left: -6.429px;
}

.spin::before {
    border: 6.429px solid transparent;
    transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}

.spin:hover::before {
    border-top-color: #f90;
    border-right-color: #f90;
    border-bottom-color: #f90;
}

.spin::after {
    border: 6.429px solid transparent;
    border-left-color: #f1f1f1; /* 初始状态和原按钮边框一致 */
    transform: rotate(200deg);
    transition: transform 0.4s linear, border-left-color 0s linear 0.35s;
}

.spin:hover::after {
    border-left-color: #f90; /* hover时左侧边框变为橙色 */
    transform: rotate(0deg); /* 旋转归位，补全圆环 */
}

.circle {
    border-radius: 100%;
    box-shadow: none;
}

<button class="spin circle"><span class="current-step">1</span>/<span>5</span></button>

• 给按钮内部文字添加position: relative; z-index: 1;，避免被伪元素遮挡
• 调整::after的初始状态：保留边框，只让左侧边框显示为灰色，hover时改为橙色并旋转归位
• 修正伪元素的定位偏移值，用精确的边框宽度代替固定像素，避免错位
• 移除hover时::after的border: 0设置，改为动态切换左侧边框颜色和旋转角度

内容的提问来源于stack exchange，提问作者Thabo