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

.double-1 {
  background:
    linear-gradient(currentColor 0 0) bottom 0   left 50% /var(--a, 0) 3px no-repeat,
    linear-gradient(currentColor 0 0) bottom 6px left 50% /var(--b, 0) 3px no-repeat;
  transition:0.5s;

}
.double-1:hover {
  --a: 60%;
  --b: 100%;
}

.double-2 {
  background:
    linear-gradient(currentColor 0 0) bottom 0   left  0 /var(--d, 0) 3px no-repeat,
    linear-gradient(currentColor 0 0) bottom 6px right 0 /var(--d, 0) 3px no-repeat;
  transition:0.5s;

}

.double-2:hover {
  --d: 100%;
}

.double-3 {
  background:
    linear-gradient(currentColor 0 0) bottom 0   left  0 /var(--d, 0) 3px no-repeat,
    linear-gradient(currentColor 0 0) bottom 6px right 0 /var(--d, 0) 3px no-repeat;
  transition: 0.5s, background-position 0s 0.5s;
}

.double-3:hover {
  --d: 100%;
  background-position: bottom 0 right 0, bottom 6px left 0;
}

.double-4 {
  background:
    linear-gradient(currentColor 0 0) 0 100% /var(--d, 0) 3px no-repeat,
    linear-gradient(currentColor 0 0) 100% calc(100% - 6px) /var(--d, 0) 3px no-repeat;
  transition: 0s 0.5s, background-size 0.5s;
}

.double-4:hover {
  --d: 100%;
  background-position: 0% calc(100% - 3px), 100% calc(100% - 3px);
  transition: 0.3s, background-position 0.3s 0.3s;
}

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

.double-5:hover {
  --d: 51%;
}

.double-6 {
  background:
    linear-gradient(currentColor 0 0) 0 100% /var(--d, 0%) 3px no-repeat,
    linear-gradient(90deg, transparent 50%, currentColor 0) bottom /calc(2*var(--d, 0%)) 3px no-repeat;
  transition:0.5s;
}

.double-6:hover {
  --d: 51%;
}

.double-7 {
  background:
    linear-gradient(currentColor 0 0) 100% 100% /var(--d, 0%) 3px no-repeat,
    linear-gradient(-90deg, transparent 50%, currentColor 0) bottom /calc(2*var(--d, 0%)) 3px no-repeat;
  transition:0.5s;
}

.double-7:hover {
  --d: 51%;
}

.double-8 {
  background:
    linear-gradient( 90deg, transparent 50%, currentColor 0) 75% 100% /var(--d, 0%) 3px no-repeat,
    linear-gradient(-90deg, transparent 50%, currentColor 0) 25% 100% /var(--d, 0%) 3px no-repeat;
  transition:0.5s;
}

.double-8:hover {
  --d: 100%;
}


/**/
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;
}