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

.unexpected-1 {
  background: 
      linear-gradient(currentColor 0 0) var(--p, 50%) 
    100% /var(--d, 10%) 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s;
}

.unexpected-1:hover {
  --d: 100%;
  --p: 0%;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.unexpected-3 {
  background: 
     linear-gradient(currentColor 0 0) left  var(--p, 50%) bottom 0 /var(--d, 10%) 3px no-repeat,
     linear-gradient(currentColor 0 0) right var(--p, 50%) bottom 0 /var(--d, 10%) 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s;
}

.unexpected-3:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.unexpected-2 {
  background: 
    linear-gradient(currentColor 0 0) left  var(--p, 50%) bottom 0 /var(--d, 10%) 3px no-repeat,
    linear-gradient(currentColor 0 0) right var(--p, 50%) bottom 0 /var(--d, 10%) 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s;
}

.unexpected-2:hover {
  --d: 50%;
  --p: 50.1%;
  transition: cubic-bezier(0, 500, 1, 500) 0.3s, background-size 0.3s 0.3s;
}

.unexpected-4 {
  background: 
      linear-gradient(currentColor 0 0) 
      var(--p, 50%) 100% /var(--d, 10%) 3px no-repeat;
  transition: 0.3s, background-position 0s;
}

.unexpected-4:hover {
  --d: 100%;
  --p: 0%;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.unexpected-5 {
  background:
    linear-gradient(currentColor 0 0) calc(50% + 10px) 100% /20px 3px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 20px), currentColor 0) 0 100%/var(--d, 50%) 3px no-repeat;
  transition: 0.3s;
}

.unexpected-5:hover {
  --d: 0%;
  background-position: calc(50% + 0px) 100%, 0 100%;
  transition: 0.3s cubic-bezier(0, -5, 1, -5), background-size 0.3s 0.3s;
}

.unexpected-6 {
  background: 
    linear-gradient(currentColor 0 0) left  var(--p, 50%) bottom 0 /var(--d, 20px) 3px no-repeat,
    linear-gradient(currentColor 0 0) right var(--p, 50%) bottom 0 /var(--d, 20px) 3px no-repeat;
  transition: 0.3s, background-position 0s;
}

.unexpected-6:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.unexpected-7 {
  background: linear-gradient(currentColor 0 0) -20% 100%/var(--p, 10%) 3px no-repeat;
  transition: 0.5s 0.3s cubic-bezier(0, 1.25, 1, 1.8), background-size 0.3s;
}

.unexpected-7:hover {
  background-position: 50% 100%;
  --p: 50%;
  transition: 0.5s cubic-bezier(0, 1.25, 1, 1.8), background-size 0.2s 0.7s;
}

.unexpected-8 {
  background: linear-gradient(currentColor 0 0) bottom/var(--p, 10%) 3px no-repeat;
  transition: 0s;
}

.unexpected-8:hover {
  --p: 10.1%;
  transition: 0.5s cubic-bezier(0, 800, 1, 800);
}


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