<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>
<div class="colorful-8">8. Hover me</div>

.colorful-1 {
  padding: 10px;
  color: #0000;
  font-weight: bold;
  background: linear-gradient(90deg,#FF3D7F 50%,#000 0) right/200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .4s linear;
}
.colorful-1:hover {
  background-position: left;
}
.colorful-1:before {
  content:"";
  position: absolute;
  inset:auto 0 0 100%;
  height: 4px;
  background: #FF3D7F;
  transition: inherit;
}
.colorful-1:hover:before {
  inset:auto 0 0 0;
}

.colorful-2 {
  padding: 10px;
  color: #0000;
  font-weight: bold;
  background: linear-gradient(-90deg,#ED303C 50%,#000 0) left/200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .4s linear;
}
.colorful-2:hover {
  background-position: right;
}
.colorful-2:before {
  content:"";
  position: absolute;
  inset:auto 100% 0 0;
  height: 4px;
  background: #ED303C;
  transition: inherit;
}
.colorful-2:hover:before {
  inset:auto 0 0 0;
}


.colorful-3 {
  padding: 10px;
  color: #0000;
  font-weight: bold;
  background: linear-gradient(#000 0 0) center/100% 100% no-repeat #3FB8AF;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .4s linear;
}
.colorful-3:hover {
  background-size: 0 100%;
}
.colorful-3:before {
  content:"";
  position: absolute;
  inset:auto 50% 0;
  height: 4px;
  background-color: inherit;
  transition: inherit;
}
.colorful-3:hover:before {
  inset:auto 0 0;
}

.colorful-4 {
  padding: 10px;
  color: #0000;
  font-weight: bold;
  background: linear-gradient(#EB9F9F 0 0) center/0 100% no-repeat #000;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .4s linear;
}
.colorful-4:hover {
  background-size: 100% 100%;
}
.colorful-4:before {
  content:"";
  position: absolute;
  inset:auto 0 0;
  height: 4px;
  background:
    linear-gradient(#EB9F9F 0 0) left,
    linear-gradient(#EB9F9F 0 0) right;
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: inherit;
}
.colorful-4:hover:before {
  background-size: 51% 100%;
}


.colorful-5 {
  padding: 10px;
  color: #0000;
  font-weight: bold;
  background: 
    linear-gradient(#3FB8AF 0 0) 0    0/0   100%,
    linear-gradient(#FF3D7F 0 0) 205% 0/50% 100%
    #000;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .3s linear,background-position .3s .3s linear;
}
.colorful-5:before {
  content:"";
  position: absolute;
  inset:auto 0 0;
  height: 4px;
  background: 
    linear-gradient(#FF3D7F 0 0) 0    0/0   100%,
    linear-gradient(#3FB8AF 0 0) 205% 0/50% 100%;
  background-repeat: no-repeat;
  transition: .3s linear,background-size .3s .3s linear;
}
.colorful-5:hover,
.colorful-5:hover:before {
  background-size: 51% 100%;
  background-position: 0 0,100% 0;
}


.colorful-6 {
  padding: 10px;
  color: #0000;
  font-weight: bold;
  background: linear-gradient(#ED303C 50%,#000 0) bottom/100% 200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .3s linear;
}
.colorful-6:hover {
  background-position: top;
  transition: .3s .3s linear;
}
.colorful-6:before {
  content:"";
  position: absolute;
  inset:0 100% 0 0;
  clip-path: inset(0 0 calc(100% - 4px));
  background: #ED303C;
  transition: inherit;
  transition: .3s .3s linear,transform .3s  linear;
}
.colorful-6:hover:before {
  inset:0 0 0 0;
  transform: translateY(calc(100% - 4px));
  transition: .3s linear,transform .3s .3s linear;
}

.colorful-7 {
  line-height: 1.4em;
  padding: 0 10px;
  color: #0000;
  font-weight: bold;
  background: linear-gradient(90deg,#00B4FF 50%,#000 0) right/200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .3s .3s linear;
}
.colorful-7:hover {
  background-position:left;
  transition: .3s .2s linear;
}
.colorful-7:before {
  content:"";
  position: absolute;
  width: 1.4em;
  height: 4px;
  inset:auto auto 0 0;
  opacity: 0;
  background: #00B4FF;
  transform-origin: left;
  transform: rotate(-90deg);
  transition: .2s .6s,inset .3s .3s,transform .3s,width .3s;
  transition-timing-function: linear;
}

.colorful-7:hover:before {
  opacity: 1;
  inset:auto auto 0 100%;
  transform: rotate(180deg);
  width: 100%;
  transition: .2s,inset .3s .2s,transform .3s .5s,width .3s .5s;
  transition-timing-function: linear;
}


.colorful-8 {
  padding: 10px;
  color: #0000;
  font-weight: bold;
  background: 
    linear-gradient(180deg,#00A8C6 50%,#000 0) bottom left,
    linear-gradient(0deg  ,#00A8C6 50%,#000 0) top right;
  background-size: 51% 200%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .3s .3s linear;
}
.colorful-8:hover {
  background-position: top left,bottom right;
}
.colorful-8:before,
.colorful-8:after {
  content:"";
  position: absolute;
  inset:0 100% 0 0;
  clip-path: inset(0 0 calc(100% - 4px));
  background: linear-gradient(#00A8C6 0 0) left/50% 100% no-repeat;
  transition: .3s .6s,transform .3s .3s,background-size .3s;
  transition-timing-function: linear;
}
.colorful-8:after { 
  clip-path: inset(calc(100% - 4px) 0 0);
  background-position: right;
  inset:0 0 0 100%;
}
.colorful-8:hover:before,
.colorful-8:hover:after {
  background-size: 100% 100%;
  inset: 0;
  transition: .3s,transform .3s .3s,background-size .3s .6s;
  transition-timing-function: linear;
}

.colorful-8:hover:before {
  transform: translateY(calc(100% - 4px));
}
.colorful-8:hover:after {
  transform: translateY(calc(4px - 100%));
}





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