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

 .colorful-1 {
  background:
    linear-gradient(red 50%,#000 0) bottom/100% 200%;
  border-bottom: 3px solid #0000;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.5s 0.2s,border-color 0.3s;
}
.colorful-1:hover {
  background-position: top;
  border-color:red;
  transition: 0.5s,border-color 0.2s 0.4s;
 }

.colorful-2 {
  border-bottom: 3px solid lightgreen;
  clip-path: polygon(0 0,100% 0, 100% calc(100% - 4px),0 calc(100% - 4px),0 100%,0 100%,0 calc(100% - 4px));
  background:
    linear-gradient(90deg,lightgreen 50%,#000 0) right/200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.5s;
}
.colorful-2:hover {
  background-position: left;
  clip-path: polygon(0 0,100% 0, 100% calc(100% - 4px),100% calc(100% - 4px),100% 100%,0 100%,0 calc(100% - 4px));
 }

 .colorful-3 {
  border-bottom: 3px solid lightblue;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 4px),50% calc(100% - 4px),50% 100%,50% 100%,50% calc(100% - 4px),0 calc(100% - 4px));
  background:
    linear-gradient(lightblue 0 0) center/0% 100% no-repeat
    #000;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.5s;
}
.colorful-3:hover {
    background-size: 100% 100%;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 4px),100% calc(100% - 4px),100% 100%,0% 100%,0% calc(100% - 4px),0 calc(100% - 4px));
 }

 .colorful-4 {
  line-height: 1.2em;
  background:
    linear-gradient(orange 0 0) top -0.6em left 50%/0% 100% no-repeat
    #000;
  border-bottom: 3px solid #0000;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.5s 0.2s,border-color 0.3s;
  transition: 0.3s 0.3s,background-position 0.3s,border-color 0.2s;
}
.colorful-4:hover {
  background-size: 100% 100%;
  background-position: top;
  border-color:orange;
  transition: 0.3s,background-position 0.3s 0.3s,border-color 0.2s 0.5s;
 }
.colorful-5 {
  border-bottom: 3px solid transparent;
  border-image:linear-gradient(90deg, lightgreen 50%,red 0) 3;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 4px),50% calc(100% - 4px),50% 100%,50% 100%,50% calc(100% - 4px),0 calc(100% - 4px));
  background:
    linear-gradient(90deg, lightgreen 50%,red 0) top/0% 100% no-repeat
    #000;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.5s;
}
.colorful-5:hover {
  background-size: 100% 100%;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 4px),100% calc(100% - 4px),100% 100%,0% 100%,0% calc(100% - 4px),0 calc(100% - 4px));
 }

 .colorful-6 {
  background:
    linear-gradient(90deg ,orange    50%,#000 0) top right/200% 50% no-repeat,
    linear-gradient(-90deg,lightblue 50%,#000 0) bottom left/200% 50% no-repeat;
  border-bottom: 3px solid lightblue;
  border-top:    3px solid orange;
  clip-path: polygon(0 0,0 0,0 4px,100% 4px,100% 100%,100% 100%,100% calc(100% - 4px),0 calc(100% - 4px));
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.5s;
}
.colorful-6:hover {
  background-position: top left,bottom right;
  clip-path: polygon(0 0,100% 0,100% 4px,100% 4px,100% 100%,0 100%,0 calc(100% - 4px),0 calc(100% - 4px));
 }

div.colorful-7 {
  font-family: monospace;
  --rainbow:repeating-linear-gradient(90deg,#ff0000 0 1ch,#ffa500 0 2ch,#ffd700 0 3ch,#008000 0 4ch,#0000ff 0 5ch,#4b0082 0 6ch,#ee82ee 0 7ch);
  background:
    var(--rainbow) top/100% 0% no-repeat
    #000;
  border-bottom: 3px solid #0000;
  clip-path: inset(0 0 4px 0);
  border-image:var(--rainbow) 3;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.5s 0.2s,clip-path 0.3s;
}
div.colorful-7:hover {
  background-size: 100% 100%;
  clip-path: inset(0 0 0 0);
  transition: 0.5s,clip-path 0.2s 0.4s linear;
 }

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  font-weight: bold;
  color:transparent;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}