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

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

.two-steps-2 {
  background:
    linear-gradient(currentColor 0 0) var(--p, 200%) 100% /50% 3px no-repeat,
    linear-gradient(currentColor 0 0) 100% 100% /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-position 0.3s 0.2s;
}
.two-steps-2:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-size 0.3s 0.2s
}

.two-steps-3 {
  background:
    linear-gradient(currentColor 0 0) var(--p, 201%) 100% /50% 3px no-repeat,
    linear-gradient(90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-3:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-position 0.3s 0.2s
}

.two-steps-4 {
  background:
    linear-gradient(currentColor 0 0) var(--p, -100%) 100% /50% 3px no-repeat,
    linear-gradient(-90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-4:hover {
  --d: 100%;
  --p: 0%;
  transition: 0.3s, background-position 0.3s 0.2s
}

.two-steps-5 {
  background:
    linear-gradient(currentColor 0 0) var(--p, 201%) 100% /50% 3px no-repeat,
    linear-gradient(-90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-5:hover {
  --d: 100%;
  --p: 0%;
  transition: 0.3s, background-position 0.3s 0.2s
}

.two-steps-6 {
  background:
    linear-gradient(currentColor 0 0) var(--p, -101%) 100% /50% 3px no-repeat,
    linear-gradient(90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.3s;
}
.two-steps-6:hover {
  --d: 100%;
  --p: 100%;
  transition: 0.3s, background-position 0.3s 0.3s
}

.two-steps-7 {
  background:
    linear-gradient(currentColor 0 0) 100% 100% /var(--p, 0%) 3px no-repeat,
    linear-gradient(currentColor 0 0) var(--d, -101%) 100% /50% 3px no-repeat;
  transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-7:hover {
  --d: 0%;
  --p: 50%;
  transition: 0.3s, background-position 0.3s 0.2s
}

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