<div class="steps-1"> 1. Hover me</div>
<div class="steps-2"> 2. Hover me</div>
<div class="steps-3"> 3. Hover me</div>
<div class="steps-4"> 4. Hover me</div>

 @property --g1{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --g2{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --g3{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --g4{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

 .steps-1 {
  padding-bottom: 8px;
  background:
    linear-gradient(currentColor 0 0) calc(0*100%/3) calc(100% + var(--g1)*1px),
    linear-gradient(currentColor 0 0) calc(1*100%/3) calc(100% + var(--g2)*1px),
    linear-gradient(currentColor 0 0) calc(2*100%/3) calc(100% + var(--g3)*1px),
    linear-gradient(currentColor 0 0) calc(3*100%/3) calc(100% + var(--g4)*1px);
  background-size: 25% 3px;
  background-repeat: no-repeat;
}
.steps-1:hover {
  --g1:-0.05;
  --g2:-0.05;
  --g3:-0.05;
  --g4:-0.05;
  transition:--g1 .15s,--g2 .15s .15s,--g3 .15s .3s,--g4 .15s .45s;
  transition-timing-function: cubic-bezier(0,200,1,200);
 }
 
 .steps-2 {
  padding:10px;
  color:#fff;
  background:
    linear-gradient(#000 0 0) calc(0*100%/3) calc(50% + var(--g1)*1px),
    linear-gradient(#000 0 0) calc(1*100%/3) calc(50% + var(--g2)*1px),
    linear-gradient(#000 0 0) calc(2*100%/3) calc(50% + var(--g3)*1px),
    linear-gradient(#000 0 0) calc(3*100%/3) calc(50% + var(--g4)*1px);
  background-size: 25% calc(100% - 10px);
  background-repeat: no-repeat;
}
.steps-2:hover {
  --g1:-0.05;
  --g2:-0.05;
  --g3:-0.05;
  --g4:-0.05;
  transition:--g1 .15s,--g2 .15s .15s,--g3 .15s .3s,--g4 .15s .45s;
  transition-timing-function: cubic-bezier(0.5,400,0.5,-400);
 }
 .steps-3 {
   padding:10px;
   background:#0000ff;
   color:#fff;
   position:relative;
   z-index:0;
 }
 .steps-3::before {
   content:"";
   position:absolute;
   z-index:-1;
   inset:0;
   background:red;
   mix-blend-mode: darken;
   transform:translateX(calc(var(--g1)*1px)) translateY(calc(var(--g2)*1px))
 }
 .steps-3:hover::before {
  --g1:-0.05;
  --g2:-0.05;
  transition:--g1 1s .26s,--g2 1s;
  transition-timing-function: cubic-bezier(0.5,1000,0.5,-1000);
 }
 
 .steps-4 {
   padding:10px;
   background:#0000ff;
   color:#fff;
   position:relative;
   z-index:0;
 }
 .steps-4::before,
 .steps-4::after{
   content:"";
   position:absolute;
   z-index:-1;
   inset:0;
   background:#ff0000;
   mix-blend-mode: darken;
   transform:scale(var(--s,1)) translateX(calc(var(--g1)*1px)) translateY(calc(var(--g2)*1px))
 }
 .steps-4::after {
   background:#00ff00;
    --s:-1;
 }
 .steps-4:hover::before,
 .steps-4:hover::after{
  --g1:-0.05;
  --g2:-0.05;
  transition:--g1 1s .26s,--g2 1s;
  transition-timing-function: cubic-bezier(0.5,2000,0.5,-2000);
 }
 
 /**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}