<div class="continuous-1">1. Hover me </div>
<div class="continuous-2">2. Hover me </div>
<div class="continuous-3">3. Hover me </div>
<div class="continuous-4">4. Hover me </div>
<div class="continuous-5">5. Hover me </div>
<div class="continuous-6">6. Hover me </div>
<div class="continuous-7">7. Hover me </div>
<div class="continuous-8">8. Hover me </div>
.continuous-1 {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--d, 201%) 100% /200% 3px 
      no-repeat;
  transition:0.5s;
}
.continuous-1:hover {
  --d: -101%;
}

.continuous-2 {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 10px), currentColor 0 calc(25% + 10px), transparent 0 50%) 
    bottom right /200% 3px 
    no-repeat;
  transition:0.5s;
}
.continuous-2:hover {
  background-position: bottom left;
}

.continuous-3 {
  background: 
     linear-gradient(90deg, currentColor calc(100%/3), transparent 0 calc(200%/3), currentColor 0) 
     var(--d, 0%) 100% /300% 3px 
    no-repeat;
  transition:0.5s;
}
.continuous-3:hover {
  --d: 100%;
}

.continuous-4 {
  background: 
     linear-gradient(90deg, transparent calc(100%/4), currentColor 0 calc(300%/4), transparent 0) 
     var(--d,100%) 100% /200% 3px 
    repeat-x;
  transition:0.5s;
}
.continuous-4:hover {
  --d: -100%;
}

.continuous-5 {
  background: 
     linear-gradient(currentColor 0 0) 
     var(--d, 201%) 100% /200% 3px 
     no-repeat;
}
.continuous-5:hover {
  --d: -101%;
  transition: 0.5s
}

.continuous-6 {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 10px), currentColor 0 calc(25% + 10px), transparent 0 50%) 
    bottom right /200% 3px 
    no-repeat;
}
.continuous-6:hover {
  background-position: bottom left;
  transition: 0.3s
}

.continuous-7 {
  background: 
     linear-gradient(90deg, currentColor calc(100%/3), transparent 0 calc(200%/3), currentColor 0) 
    var(--d, 0%) 100% /300% 3px 
    no-repeat;
}
.continuous-7:hover {
  --d: 100%;
  transition: 0.5s
}

.continuous-8 {
  background: 
     linear-gradient(90deg, transparent calc(100%/4), currentColor 0 calc(300%/4), transparent 0) 
     var(--d,100%) 100% /200% 3px 
     repeat-x;
}
.continuous-8:hover {
  --d: -100%;
  transition: 0.5s
}


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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.