<div class="infinite-1">1. Hover me </div>
<div class="infinite-2">2. Hover me </div>
<div class="infinite-3">3. Hover me </div>
<div class="infinite-4">4. Hover me </div>
<div class="infinite-5">5. Hover me </div>
<div class="infinite-6">6. Hover me </div>
<div class="infinite-7">7. Hover me </div>
<div class="infinite-8">8. Hover me </div>

.infinite-1 {
  background: 
     repeating-linear-gradient(90deg, currentColor 0 15px, transparent 0 30px) 
     bottom left /2000% 3px no-repeat;
  transition: 99999s linear;
}
.infinite-1:hover {
  background-position: bottom right;
  transition: 40s linear;
}

.infinite-2 {
  background: 
     repeating-linear-gradient(90deg, currentColor 0 15px, transparent 0 30px) 
     bottom right /2000% 3px no-repeat;
  transition: 99999s linear;
}
.infinite-2:hover {
  background-position: bottom left;
  transition: 40s linear;
}

.infinite-3 {
  background:
    repeating-linear-gradient(90deg, currentColor 0 15px, transparent 0 30px),
    repeating-linear-gradient(90deg, currentColor 0 15px, transparent 0 30px);
  background-position: center bottom;
  background-size: 2000% 3px;
  background-repeat: no-repeat;
  transition: 99999s linear;
}
.infinite-3:hover {
  background-position: bottom left, bottom right;
  transition: 40s linear;
}

.infinite-4 {
  background: 
     linear-gradient(90deg, currentColor 50%, transparent 0) 
     0 100%/200% 3px repeat-x;
  transition: 99999s linear;
}
.infinite-4:hover {
  background-position: -8000px 100%;
  transition: 30s;
}

.infinite-5 {
  background: 
     linear-gradient(90deg, currentColor 50%, transparent 0) 
     0 100%/200% 3px repeat-x;
  transition: 99999s linear;
}
.infinite-5:hover {
  background-position: 8000px 100%;
  transition: 30s;
}

.infinite-6 {
  background:
    linear-gradient(90deg, currentColor 30px, transparent 0 calc(100% - 30px), currentColor 0),
    linear-gradient(90deg, currentColor 30px, transparent 0 calc(100% - 30px), currentColor 0);
  background-size: 200% 3px;
  background-position: 0 100%, 0px 100%;
  background-repeat: repeat-x;
  transition: 99999s linear;
}
.infinite-6:hover {
  background-position: 10000px 100%, -10000px 100%;
  transition: 30s linear;
}

.infinite-7 {
  background:
    linear-gradient(90deg, currentColor 15px, transparent 0 calc(100% - 15px), currentColor 0),
    linear-gradient(90deg, currentColor 15px, transparent 0 calc(100% - 15px), currentColor 0);
  background-size: 100% 3px;
  background-position: 0 100%, 0px 100%;
  background-repeat: repeat-x;
  transition: 99999s linear;
}
.infinite-7:hover {
  background-position: 10000px 100%, -10000px 100%;
  transition: 30s linear;
}

.infinite-8 {
  background:
    linear-gradient(90deg, transparent calc(25% - 15px), currentColor 0 calc(25% + 15px), transparent 0) 0 100%/200% 3px repeat-x;
  transition: 99999s linear;
}
.infinite-8:hover {
  background-position: 10000px 100%, -10000px 100%;
  transition: 30s linear;
}

/**/
div[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  padding-bottom:8px;
  cursor:pointer;
}
div[class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}