<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 {
  padding-bottom:8px;
  clip-path:polygon(0 0,calc(100% - 1px) 1px,calc(100% - 1px) 100%,
    100vmax 100%,100vmax calc(100% + 3px),0 calc(100% + 3px));
  box-shadow:100vmax 3px 0px currentColor;
  transition:0.5s linear;
}
.unexpected-1:hover {
  box-shadow:0 3px 0px currentColor;
}

.unexpected-2 {
  padding-bottom:8px;
  clip-path:polygon(1px 1px,100% 1px,100% calc(100% + 3px),-100vmax calc(100% + 3px),-100vmax 100%,1px 100%);
  box-shadow:-100vmax 3px 0px currentColor;
  transition:0.5s linear;
}
.unexpected-2:hover {
  box-shadow:0 3px 0px currentColor;
}

.unexpected-3 {
  padding-bottom:8px;
  clip-path:polygon(0 0,calc(100% - 1px) 0,calc(100% - 1px) 100%,
    var(--d,calc(50% - 10px)) 100%,
    var(--d,calc(50% - 10px))           calc(100% + 3px),
    calc(-1*var(--d,calc(-50% - 10px))) calc(100% + 3px),
    calc(-1*var(--d,calc(-50% - 10px))) 100%,0 100%);
  box-shadow:var(--d,0) 3px 0px currentColor;
  transition:clip-path ease-out 0.5s 0.3s,box-shadow 0.3s;
}
.unexpected-3:hover {
  --d:100vmax;
  transition:clip-path ease-in 0.8s,box-shadow 0.4s 0.5s;
}

.unexpected-4 {
  padding-bottom:8px;
  clip-path:polygon(1px 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - 1px),
    calc(50% - 10px + var(--d,0px)) calc(100% - 1px),
    calc(50% - 10px + var(--d,0px)) calc(100% + 3px),
    calc(50% + 10px + var(--d,0px)) calc(100% + 3px),
    calc(50% + 10px + var(--d,0px)) calc(100% - 1px),1px calc(100% - 1px));
  box-shadow:0 0px 0px 100vmax currentColor;
  transition:0s;
}
.unexpected-4:hover {
  --d:1px;
  transition:0.5s cubic-bezier(.5, -700, .5, 700);
}

.unexpected-5 {
  padding-bottom:8px;
  background:
   linear-gradient(currentColor 0 0) calc(50% + calc(var(--d,1)*3px)) 100%,
   linear-gradient(currentColor 0 0) calc(50% - calc(var(--d,1)*3px)) 100%,
   linear-gradient(currentColor 0 0) calc(50% + calc(var(--d,1)*9px)) 100%,
   linear-gradient(currentColor 0 0) calc(50% - calc(var(--d,1)*9px)) 100%;
 background-size:6px 3px;
 background-repeat:no-repeat;
 transition:0.5s;
}
.unexpected-5:hover {
   --d:8; 
 }

.unexpected-6 {
  padding-bottom:8px;
  clip-path:polygon(1px 1px,calc(100% - 1px) 1px,calc(100% - 1px) 100%,
    100vmax 100%,
    100vmax  calc(100% + 3px),
    -100vmax calc(100% + 3px),
    -100vmax 100%,1px 100%);
  box-shadow:
    0        3px 0px currentColor,
    -100vmax 3px 0px currentColor;
  transition:0s;
}
.unexpected-6:hover {
  box-shadow:
    100vmax 3px 0px currentColor,
    0       3px 0px currentColor;
  transition:0.5s linear;
}


.unexpected-7 {
  padding:8px;
  border:3px solid;
  outline:3px solid;
  outline-offset:-3px;
  transition:0s;
}
.unexpected-7:hover {
  outline-offset:100px;
  outline-color:#0000;
  transition:0.5s;
}

.unexpected-8 {
  padding:8px;
  border:3px solid;
  outline:3px solid #0000;
  outline-offset:100px;
  transition:0s;
}
.unexpected-8:hover {
  outline-offset:-3px;
  border-color:#0000;
  outline-color:currentColor;
  transition:0.5s;
}

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