<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>
<div class="steps-5">5. Hover me</div>
<div class="steps-6">6. Hover me</div>

@property --g1{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --g2{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --g3{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --g4{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --g5{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --g6{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --g7{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --g8{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.steps-1 {
  padding-bottom: 8px;
}
.steps-1:before,
.steps-1:after {
  content: "";
  position: absolute;
  inset: auto 50% 0 0;
  height: 100%;
  --g1:6;
  --g2:6;
  --g3:6;
  --g4:6;
  --s: .4s;
  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.5% 3px;
  background-repeat: no-repeat;
  transition:--g1 .1s calc(var(--s) + .3s),--g2 .1s calc(var(--s) + .2s),--g3 .1s calc(var(--s) + .1s),--g4 .1s calc(var(--s) + 0s);
  transition-timing-function: cubic-bezier(0,-2,1,-2);
}
.steps-1:after {
  inset: auto 0 0 50%;
  --s: 0s;
}
.steps-1:hover:before,
.steps-1:hover:after {
  --g1:0;
  --g2:0;
  --g3:0;
  --g4:0;
  --s: 0s;
  transition:--g1 .1s calc(var(--s) + 0s),--g2 .1s calc(var(--s) + .1s),--g3 .1s calc(var(--s) + .2s),--g4 .1s calc(var(--s) + .3s);
  transition-timing-function: cubic-bezier(0,3,1,3);
 }
 .steps-1:hover:after {
  --s: .4s;
 }


.steps-2 {
  padding-bottom: 8px;
}
.steps-2:before,
.steps-2:after {
  content: "";
  position: absolute;
  inset: auto 50% 0 0;
  height: 100%;
  --g1:6;
  --g2:6;
  --g3:6;
  --g4:6;
  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.5% 3px;
  background-repeat: no-repeat;
  transition:--g1 .2s .6s,--g2 .2s .4s,--g3 .2s .2s,--g4 .2s;
  transition-timing-function: cubic-bezier(0,-2,1,-2);
}
.steps-2:after {
  transform-origin: right;
  transform: scaleX(-1);
}
.steps-2:hover:before,
.steps-2:hover:after {
  --g1:0;
  --g2:0;
  --g3:0;
  --g4:0;
  transition:--g1 .2s,--g2 .2s .2s,--g3 .2s .4s,--g4 .2s .6s;
  transition-timing-function: cubic-bezier(0,3,1,3);
 }


.steps-3 {
  padding-bottom: 8px;
}
.steps-3:before,
.steps-3:after {
  content: "";
  position: absolute;
  inset: auto calc(50% - 1px) 0 0;
  height: 100%;
  --g1:6;
  --g2:6;
  --g3:6;
  --g4:6;
  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.5% 3px;
  background-repeat: no-repeat;
  transition:--g1 .2s .6s,--g2 .2s .4s,--g3 .2s .2s,--g4 .2s;
  transition-timing-function: cubic-bezier(0,-2,1,-2);
}
.steps-3:after {
  transform-origin: calc(100% - 1px) calc(100% - 1.5px);
  transform: scale(-1);
}
.steps-3:hover:before,
.steps-3:hover:after {
  --g1:0;
  --g2:0;
  --g3:0;
  --g4:0;
  transition:--g1 .2s,--g2 .2s .2s,--g3 .2s .4s,--g4 .2s .6s;
  transition-timing-function: cubic-bezier(0,3,1,3);
 }


.steps-4 {
  padding-bottom: 8px;
}
.steps-4:before,
.steps-4:after {
  content: "";
  position: absolute;
  inset: auto 49% 0 0;
  height: 100%;
  --g1:0;
  --g2:0;
  --g3:0;
  --g4:0;
  background:
    linear-gradient(currentColor 0 0) calc(0*100%/3) 100%/calc(var(--g1)*1%) 3px,
    linear-gradient(currentColor 0 0) calc(1*100%/3) 100%/calc(var(--g2)*1%) 3px,
    linear-gradient(currentColor 0 0) calc(2*100%/3) 100%/calc(var(--g3)*1%) 3px,
    linear-gradient(currentColor 0 0) calc(3*100%/3) 100%/calc(var(--g4)*1%) 3px;
  background-repeat: no-repeat;
  transition:--g1 .2s .6s,--g2 .2s .4s,--g3 .2s .2s,--g4 .2s;
}
.steps-4:after {
  inset: auto 0 0 50%;
  transform: scaleX(-1);
}
.steps-4:hover:before,
.steps-4:hover:after {
  --g1:26;
  --g2:26;
  --g3:26;
  --g4:26;
  transition:--g1 .2s,--g2 .2s .2s,--g3 .2s .4s,--g4 .2s .6s;
 }

.steps-5 {
  padding-bottom: 8px;
}
.steps-5:before,
.steps-5:after {
  content: "";
  position: absolute;
  inset: auto 49% 0 0;
  height: 100%;
  --g1:0;
  --g2:0;
  --g3:0;
  --g4:0;
  --s: .25s;
  background:
    linear-gradient(currentColor 0 0) calc(0*100%/3) 100%/calc(var(--g1)*1%) 3px,
    linear-gradient(currentColor 0 0) calc(1*100%/3) 100%/calc(var(--g2)*1%) 3px,
    linear-gradient(currentColor 0 0) calc(2*100%/3) 100%/calc(var(--g3)*1%) 3px,
    linear-gradient(currentColor 0 0) calc(3*100%/3) 100%/calc(var(--g4)*1%) 3px;
  background-repeat: no-repeat;
  transition:--g2 .2s calc(var(--s) + .6s),--g4 .2s calc(var(--s) + .4s),--g1 .2s calc(var(--s) + .2s),--g3 .2s calc(var(--s) + 0s);
}
.steps-5:after {
  inset: auto 0 0 50%;
  transform: scaleX(-1);
  --s: 0s;
}
.steps-5:hover:before,
.steps-5:hover:after {
  --g1:26;
  --g2:26;
  --g3:26;
  --g4:26;
  --s: 0s;
  transition:--g3 .2s calc(var(--s) + 0s),--g1 .2s calc(var(--s) + .2s),--g4 .2s calc(var(--s) + .4s),--g2 .2s calc(var(--s) + .6s);
 }
 .steps-5:hover:after {
  --s: .25s;
 }


.steps-6 {
  padding-bottom: 8px;
  clip-path: inset(1px 0 -2px);
  color: #0000;
  background: 
    linear-gradient(#ed303c 50%,#000 0) calc(0*100%/7) calc(100% - var(--g1)*1%),
    linear-gradient(#ed303c 50%,#000 0) calc(1*100%/7) calc(100% - var(--g2)*1%),
    linear-gradient(#ed303c 50%,#000 0) calc(2*100%/7) calc(100% - var(--g3)*1%),
    linear-gradient(#ed303c 50%,#000 0) calc(3*100%/7) calc(100% - var(--g4)*1%),
    linear-gradient(#ed303c 50%,#000 0) calc(4*100%/7) calc(100% - var(--g5)*1%),
    linear-gradient(#ed303c 50%,#000 0) calc(5*100%/7) calc(100% - var(--g6)*1%),
    linear-gradient(#ed303c 50%,#000 0) calc(6*100%/7) calc(100% - var(--g7)*1%),
    linear-gradient(#ed303c 50%,#000 0) calc(7*100%/7) calc(100% - var(--g8)*1%);
  background-size: 12.7% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  --g1:0;
  --g2:0;
  --g3:0;
  --g4:0;
  --g5:0;
  --g6:0;
  --g7:0;
  --g8:0;
  transition:
    --g8 .1s,
    --g7 .1s .1s,
    --g6 .1s .2s,
    --g5 .1s .3s,
    --g4 .1s .4s,
    --g3 .1s .5s,
    --g2 .1s .6s,
    --g1 .1s .7s; 
}
.steps-6:hover {
  --g1:100;
  --g2:100;
  --g3:100;
  --g4:100;
  --g5:100;
  --g6:100;
  --g7:100;
  --g8:100;
  transition:
    --g1 .1s,
    --g2 .1s .1s,
    --g3 .1s .2s,
    --g4 .1s .3s,
    --g5 .1s .4s,
    --g6 .1s .5s,
    --g7 .1s .6s,
    --g8 .1s .7s; 
}
.steps-6:before{
  content: "";
  position: absolute;
  inset: -4px 0 0;
  background:
    linear-gradient(#ed303c 0 0) calc(0*100%/7) calc(var(--g1)*1%),
    linear-gradient(#ed303c 0 0) calc(1*100%/7) calc(var(--g2)*1%),
    linear-gradient(#ed303c 0 0) calc(2*100%/7) calc(var(--g3)*1%),
    linear-gradient(#ed303c 0 0) calc(3*100%/7) calc(var(--g4)*1%),
    linear-gradient(#ed303c 0 0) calc(4*100%/7) calc(var(--g5)*1%),
    linear-gradient(#ed303c 0 0) calc(5*100%/7) calc(var(--g6)*1%),
    linear-gradient(#ed303c 0 0) calc(6*100%/7) calc(var(--g7)*1%),
    linear-gradient(#ed303c 0 0) calc(7*100%/7) calc(var(--g8)*1%);
  background-size: 12.7% 3px;
  background-repeat: no-repeat;
}
  

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
  position: relative;
}
[class]:before,
[class]:after {
  pointer-events: none;
}

body {
  text-align:center;
}