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

.broken-1 {
   padding:8px 0;
   --w: 10ch;
   letter-spacing: var(--w);
   width: var(--w);
   white-space: nowrap;
   text-shadow: 
     calc(-1*var(--w)) 0 0, 
     calc(-2*var(--w)) 0 0, 
     calc(-3*var(--w)) 0 0, 
     calc(-4*var(--w)) 0 0,

     calc(-5*var(--w)) var(--y,0) 0, 
     calc(-6*var(--w)) var(--y,0) 0, 
     calc(-7*var(--w)) var(--y,0) 0, 
     calc(-8*var(--w)) var(--y,0) 0, 
     calc(-9*var(--w)) var(--y,0) 0;
   box-shadow:0 0 0px 80px var(--c,#0000);
   background:var(--c,#0000);
  transform: translateY( calc(var(--y,0)/-2));
  clip-path:  polygon(0 0,50% 0,50% var(--y,0),100% var(--y,0),100% calc(100% + var(--y,0px)),50% calc(100% + var(--y,0px)),50% 100%,0 100%);
  transition: 0.3s,color  0.4s 0.3s,background  0.4s 0.3s,box-shadow 0.4s 0.3s; 
 }
 div.broken-1:hover {
  --c:#000;
  color:#fff;
  --y:-20px;
  transition: 0.3s,text-shadow  0.4s 0.3s,clip-path 0.4s 0.3s,transform  0.4s 0.3s; 
}

.broken-2 {
   padding:8px 0;
   --w: 10ch;
   letter-spacing: var(--w);
   width: calc(var(--w) + var(--y,0px));
   white-space: nowrap;
   text-shadow: 
     calc(-1*var(--w)) 0 0, 
     calc(-2*var(--w)) 0 0, 
     calc(-3*var(--w)) 0 0, 
     calc(-4*var(--w)) 0 0,

     calc(-5*var(--w) + var(--y,0px)) 0 0, 
     calc(-6*var(--w) + var(--y,0px)) 0 0, 
     calc(-7*var(--w) + var(--y,0px)) 0 0, 
     calc(-8*var(--w) + var(--y,0px)) 0 0, 
     calc(-9*var(--w) + var(--y,0px)) 0 0;
   background:var(--c,#0000);
  -webkit-mask:
   linear-gradient(#000 0 0) left,
   linear-gradient(#000 0 0) right;
  -webkit-mask-size:5ch 100%;
  -webkit-mask-repeat:no-repeat ;
  transition: 0.3s,color  0.4s 0.3s,background  0.4s 0.3s; 
 }
.broken-2:hover {
  --c:#000;
  color:#fff;
  --y:20px;
  transition: 0.3s,text-shadow  0.4s 0.3s,width 0.4s 0.3s,transform  0.4s 0.3s; 
}

.broken-3 {
   padding:8px 0;
   --w: 10ch;
   letter-spacing: calc(2*var(--w)  + var(--y,0px));
   width: calc(var(--w) + 10*var(--y,0px));
   white-space: nowrap;
   text-shadow: 
     calc(-2*var(--w)) 0 0, 
     calc(-4*var(--w)) 0 0, 
     calc(-6*var(--w)) 0 0, 
     calc(-8*var(--w)) 0 0,

     calc(-10*var(--w)) 0 0, 
     calc(-12*var(--w)) 0 0, 
     calc(-14*var(--w)) 0 0, 
     calc(-16*var(--w)) 0 0, 
     calc(-18*var(--w)) 0 0;
   background:var(--c,#0000);
  -webkit-mask: linear-gradient(90deg,#000 1ch,#0000 0) left/calc(1ch + var(--y,0px)) 100%;

  transition: 0.3s,color  0.4s 0.3s,background  0.4s 0.3s; 
 }
.broken-3:hover {
  --c:#000;
  color:#fff;
  --y:5px;
  transition: 0.3s,text-shadow  0.4s 0.3s,width 0.4s 0.3s,-webkit-mask-size  0.4s 0.3s,letter-spacing 0.4s 0.3s; 
}

.broken-4 {
   padding:8px 0;
   --w: 10ch;
   letter-spacing: var(--w);
   width: var(--w);
   white-space: nowrap;
   text-shadow: 
     calc(-1*var(--w)) 0 0, 
     calc(-2*var(--w)) 0 0, 
     calc(-3*var(--w)) 0 0, 
     calc(-4*var(--w)) 0 0,

     calc(-5*var(--w)) var(--y,0) 0, 
     calc(-6*var(--w)) var(--y,0) 0, 
     calc(-7*var(--w)) var(--y,0) 0, 
     calc(-8*var(--w)) var(--y,0) 0, 
     calc(-9*var(--w)) var(--y,0) 0;
   box-shadow:0 0 0px 80px var(--c,#0000);
   background:var(--c,#0000);
  transform: translateY( calc(var(--y,0)/-2));
  clip-path:  polygon(0 0,50% 0,50% var(--y,0),100% var(--y,0),100% calc(100% + var(--y,0px)),50% calc(100% + var(--y,0px)),50% 100%,0 100%);
  transition: 0s,color  0.4s,background  0.4s,box-shadow 0.4s; 
 }
.broken-4:hover {
  --c:#000;
  color:#fff;
  --y:-0.5px;
  transition: 0.3s,text-shadow cubic-bezier(.5,150,.5,-150)  0.4s 0.3s,clip-path cubic-bezier(.5,150,.5,-150) 0.4s 0.3s,transform cubic-bezier(.5,150,.5,-150) 0.4s 0.3s; 
}

.broken-5 {
   padding:8px 0;
   --w: 10ch;
   letter-spacing: var(--w);
   width: calc(var(--w) + var(--y,0px));
   white-space: nowrap;
   text-shadow: 
     calc(-1*var(--w)) 0 0, 
     calc(-2*var(--w)) 0 0, 
     calc(-3*var(--w)) 0 0, 
     calc(-4*var(--w)) 0 0,

     calc(-5*var(--w) + var(--y,0px)) 0 0, 
     calc(-6*var(--w) + var(--y,0px)) 0 0, 
     calc(-7*var(--w) + var(--y,0px)) 0 0, 
     calc(-8*var(--w) + var(--y,0px)) 0 0, 
     calc(-9*var(--w) + var(--y,0px)) 0 0;
   background:var(--c,#0000);
  -webkit-mask:
   linear-gradient(to bottom right,#000 50.5%,#0000 0) left,
   linear-gradient(to top    left ,#000 50.5%,#0000 0) right;
  -webkit-mask-size:var(--w) calc(2*var(--w));
  -webkit-mask-repeat:no-repeat ;
  transition: 0.3s,color  0.4s 0.3s,background  0.4s 0.3s; 
 }
.broken-5:hover {
  --c:#000;
  color:#fff;
  --y:20px;
  transition: 0.3s,text-shadow  0.4s 0.3s,width 0.4s 0.3s,transform  0.4s 0.3s; 
}
.broken-6 {
   line-height: 1.4em;
   --w: 10ch;
   letter-spacing: var(--w);
   width: calc(var(--w) + var(--y,0px));
   white-space: nowrap;
   text-shadow: 
     calc(-1*var(--w)) 0 0, 
     calc(-2*var(--w)) 0 0, 
     calc(-3*var(--w)) 0 0, 
     calc(-4*var(--w)) 0 0,

     calc(-5*var(--w) + var(--y,0px)) var(--x,0px) 0, 
     calc(-6*var(--w) + var(--y,0px)) var(--x,0px) 0, 
     calc(-7*var(--w) + var(--y,0px)) var(--x,0px) 0, 
     calc(-8*var(--w) + var(--y,0px)) var(--x,0px) 0, 
     calc(-9*var(--w) + var(--y,0px)) var(--x,0px) 0;
   box-shadow:0 0 0px 80px var(--c,#0000);
   background:var(--c,#0000);
  clip-path: polygon(0 0,calc(50% + 0.35em) 0,calc(50% + 0.35em + var(--y,0px)/2) var(--x,0),100% var(--x,0),100% calc(100% + var(--x,0px)),calc(50% - 0.35em) calc(100% + var(--x,0px)),calc(50% - 0.35em - var(--y,0px)/2) 100%,0 100%);
  transform: translateY( calc(var(--x,0)/-2));
  transition: 0.3s,color  0.4s 0.3s,background  0.4s 0.3s,box-shadow  0.4s 0.3s; 
 }
.broken-6:hover {
  --c:#000;
  color:#fff;
  --y:20px;
  --x:-10px;
  transition: 0.3s,text-shadow  0.4s 0.3s,width 0.4s 0.3s,transform  0.4s 0.3s,clip-path  0.4s 0.3s; 
}
.broken-7 {
   line-height: 1.4em;
   --w: 10ch;
   letter-spacing: var(--w);
   width: calc(var(--w) + var(--y,0px));
   white-space: nowrap;
   text-shadow: 
     calc(-1*var(--w)) 0 0, 
     calc(-2*var(--w)) 0 0, 
     calc(-3*var(--w)) 0 0, 
     calc(-4*var(--w)) 0 0,

     calc(-5*var(--w) + var(--y,0px)) var(--x,0px) 0, 
     calc(-6*var(--w) + var(--y,0px)) var(--x,0px) 0, 
     calc(-7*var(--w) + var(--y,0px)) var(--x,0px) 0, 
     calc(-8*var(--w) + var(--y,0px)) var(--x,0px) 0, 
     calc(-9*var(--w) + var(--y,0px)) var(--x,0px) 0;
   box-shadow:0 0 0px 80px var(--c,#0000);
   background:var(--c,#0000);
  clip-path: polygon(0 0,calc(50% + 0.35em) 0,calc(50% + 0.35em + var(--y,0px)/2) var(--x,0),100% var(--x,0),100% calc(100% + var(--x,0px)),calc(50% - 0.35em) calc(100% + var(--x,0px)),calc(50% - 0.35em - var(--y,0px)/2) 100%,0 100%);
  transform: translateY( calc(var(--x,0)/-2));
  transition: 0s,color  0.4s,background  0.4s,box-shadow  0.4s; 
 }
.broken-7:hover {
  --c:#000;
  color:#fff;
  --y:0.4px;
  --x:-0.2px;
  transition: 0.3s,text-shadow  cubic-bezier(.5,150,.5,-150)  0.4s 0.3s,width  cubic-bezier(.5,150,.5,-150) 0.4s 0.3s,transform cubic-bezier(.5,150,.5,-150)   0.4s 0.3s,clip-path cubic-bezier(.5,150,.5,-150)   0.4s 0.3s; 
}

.broken-8 {
   padding:8px 0;
   --w: 10ch;
   letter-spacing: var(--w);
   width: calc(var(--w) + var(--y,0px));
   white-space: nowrap;
   text-shadow: 
     calc(-1*var(--w)) 0 0, 
     calc(-2*var(--w)) 0 0, 
     calc(-3*var(--w)) 0 0, 
     calc(-4*var(--w)) 0 0,

     calc(-5*var(--w) + var(--y,0px)) 0 0, 
     calc(-6*var(--w) + var(--y,0px)) 0 0, 
     calc(-7*var(--w) + var(--y,0px)) 0 0, 
     calc(-8*var(--w) + var(--y,0px)) 0 0, 
     calc(-9*var(--w) + var(--y,0px)) 0 0;
   background:var(--c,#0000);
  -webkit-mask:
   conic-gradient(from 20deg at calc(100% - 20px) 50%,#0000 140deg,#000 0) left,
   conic-gradient(from 20deg at 20px 50%,#000 140deg,#0000 0) right;
  -webkit-mask-size:calc(var(--w)/2 + 20px) 100%;
  -webkit-mask-repeat:no-repeat ;
  transition: 0.3s,color  0.4s 0.3s,background  0.4s 0.3s; 
 }
.broken-8:hover {
  --c:#000;
  color:#fff;
  --y:20px;
  transition: 0.3s,text-shadow  0.4s 0.3s,width 0.4s 0.3s,transform  0.4s 0.3s; 
} 

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family: monospace;
  overflow:hidden;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}