<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>

 .double-1 {
   padding-bottom:8px;
   background:
   	linear-gradient(currentColor 0 0) left  0 bottom 4px,
   	linear-gradient(currentColor 0 0) right 0 bottom 4px;
   background-size:50% 3px;
   background-repeat:no-repeat;
   transition:0.3s linear,background-position 0.3s 0.3s;
 }
.double-1:hover {
 	background-position: left 0 bottom 6px,right 0 bottom 0; 
 	background-size: 100% 3px;
 	transition:0.3s linear,background-size 0.3s 0.3s;
 }

.double-2 {
   padding-bottom:8px;
   background:
   	linear-gradient(currentColor 0 0) left  0 bottom 4px,
   	linear-gradient(currentColor 0 0) right 0 bottom 4px;
   background-size:50% 3px;
   background-repeat:no-repeat;
 	 transition:0.3s linear,background-size 0.3s 0.3s;
 }
.double-2:hover {
 	background-position: left 0 bottom 6px,right 0 bottom 0; 
 	background-size: 100% 3px;
 }

.double-3 {
   padding-bottom:8px;
   background:
   	linear-gradient(currentColor 0 0) left  -100% bottom 0,
   	linear-gradient(currentColor 0 0) right -100% bottom 0;
   background-size:40% 3px;
   background-repeat:no-repeat;
  transition:0.5s;
 }
 .double-3:hover {
 	background-position: left 10% bottom 0,right 10% bottom 0; 
 }

.double-4 {
   padding-bottom:8px;
   background:
   	linear-gradient(currentColor 0 0) bottom,
   	linear-gradient(currentColor 0 0) bottom;
   background-size:15px 3px;
   background-repeat:no-repeat;
   transition:0.3s linear,background-size 0.3s 0.2s linear;
 }
.double-4:hover {
 	background-size:40% 3px;
 	background-position: left 10% bottom 0,right 10% bottom 0; 
 }

.double-5 {
   padding-bottom:8px;
   background:
   	linear-gradient( 90deg, #0000 calc(50% - 10px),currentColor 0) bottom 4px center,
   	linear-gradient(-90deg, #0000 calc(50% - 10px),currentColor 0) bottom 4px center;
   background-size:15px 3px;
   background-repeat:no-repeat;
   transition:0.3s linear,background-size 0.3s 0.3s linear;
 }
 .double-5:hover {
 	background-position: bottom 6px center, bottom 0 center; 
 	background-size: 100% 3px;
 }
 
.double-6 {
   padding-bottom:8px;
   background:
   	linear-gradient(currentColor 0 0) bottom 6px center,
   	linear-gradient(currentColor 0 0) bottom left,
   	linear-gradient(currentColor 0 0) bottom right;
   background-size:0 3px;
   background-repeat:no-repeat;
   transition:0.5s linear,background-position 0s 0.5s;
 }
.double-6:hover {
 	background-size:100% 3px,50% 3px,50% 3px;
 	background-position:bottom,bottom 6px left 0,bottom 6px right 0; 
 }
 
.double-7 {
   padding-bottom:8px;
   background:
   	linear-gradient( 90deg, #0000 calc(50% + 10px),currentColor 0) bottom ,
   	linear-gradient(-90deg, #0000 calc(50% + 10px),currentColor 0) bottom ;
   background-size:0px 3px;
   background-repeat:no-repeat;
  transition:0.5s;
 }
.double-7:hover { 
 	background-size: 90% 3px;
 }

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