鼠标悬停时伪元素动画咨询：白色线条无限滚动效果

当然可以实现这个循环滚动的效果！只需要调整一下动画关键帧的逻辑，就能让这条白色线条按照你想要的方式无限循环滚动。

我帮你修改了代码，直接就能用：

.buttonWrap { 
  position: relative; 
  overflow: hidden; /* 新增：隐藏超出容器的线条，避免视觉混乱 */
}
.buttonWrap:before { 
  content: ''; 
  width: 20px; 
  border-bottom: solid 2px #fff; 
  position: absolute; 
  top: 50%; 
  right: .5rem; 
  transform: translateY(-50%); 
}
.buttonWrap:hover::before { 
  animation: slideLoop 2s ease 0s infinite normal none; /* 调整时长让滚动更平缓 */
}
/* 自定义循环动画逻辑 */
@keyframes slideLoop {
  0% {
    transform: translateY(-50%) translateX(0); /* 初始位置 */
  }
  45% {
    transform: translateY(-50%) translateX(calc(100% + 100vw)); /* 向右滚动出视野 */
  }
  50% {
    transform: translateY(-50%) translateX(calc(-100% - 100vw)); /* 瞬间跳到左侧视野外 */
  }
  95% {
    transform: translateY(-50%) translateX(0); /* 滚动回初始位置 */
  }
}
.uiBtn.redBtn { 
  background: #1a1a1a; 
  text-transform: uppercase; 
  text-align: left; 
  color: #fff; 
  min-width: 16.25rem; 
  font-size: .6875rem; 
  cursor: pointer; 
  letter-spacing: 1px; 
  line-height: 1rem; 
  width: auto; 
  margin-top: 2rem; 
  font-weight: 600; 
  padding:10px; 
}

<span class="buttonWrap">
  <input type="submit" class="uiBtn redBtn" value="Submit">
</span>

关键调整说明： #

• 给.buttonWrap加了overflow: hidden：确保线条移出按钮区域时被隐藏，不会出现线条跑到按钮外面的突兀感
• 重写了@keyframes：实现“向右滑出视野→瞬间切换到左侧→向左滑回原位”的循环逻辑，用calc(100% + 100vw)保证线条完全移出屏幕，避免在不同尺寸设备上出现残留
• 调整了动画时长为2s：默认1s太快，改成2s让滚动节奏更自然，你可以根据需求自行修改这个数值

这样修改后，鼠标悬停时线条就会无限循环滚动啦！

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