<div class="crushed-1">1 Hover me </div>
<div class="crushed-2">2 Hover me </div>
<div class="crushed-3">3 Hover me </div>
<div class="crushed-4">4 Hover me </div>
<div class="crushed-5">5 Hover me </div>
<div class="crushed-6">6 Hover me </div>
<div class="crushed-7">7 Hover me </div>
div.crushed-1 {
  --w:10ch;
  --x:0;
  letter-spacing: calc(10*var(--w));
  width: var(--w);
  text-shadow: 
    calc(-10*var(--w) - var(--x)*1ch) 0 0,
    calc(-20*var(--w) - var(--x)*2ch) 0 0,
    calc(-30*var(--w) - var(--x)*3ch) 0 0,
    calc(-40*var(--w) - var(--x)*4ch) 0 0,
    calc(-50*var(--w) - var(--x)*5ch) 0 0,
    calc(-60*var(--w) - var(--x)*6ch) 0 0,
    calc(-70*var(--w) - var(--x)*7ch) 0 0,
    calc(-80*var(--w) - var(--x)*8ch) 0 0,
    calc(-90*var(--w) - var(--x)*9ch) 0 0;
  background:linear-gradient(currentColor 0 0) right/0% 100% no-repeat;
  transition: 0.5s;
}
 .crushed-1:hover {
  --x:1;
  background-size:calc(var(--w) - 1ch) 100%;
 }

 div.crushed-2 {
  padding-bottom: 8px;
  --w:10ch;
  --x:0;
  letter-spacing: calc(10*var(--w));
  width: var(--w);
  text-shadow: 
    calc(-10*var(--w) - var(--x)*1ch) 0 0,
    calc(-20*var(--w) - var(--x)*2ch) 0 0,
    calc(-30*var(--w) - var(--x)*3ch) 0 0,
    calc(-40*var(--w) - var(--x)*4ch) 0 0,
    calc(-50*var(--w) - var(--x)*5ch) 0 0,
    calc(-60*var(--w) - var(--x)*6ch) 0 0,
    calc(-70*var(--w) - var(--x)*7ch) 0 0,
    calc(-80*var(--w) - var(--x)*8ch) 0 0,
    calc(-90*var(--w) - var(--x)*9ch) 0 0;
  background:linear-gradient(currentColor 0 0) bottom/100% 3px no-repeat;
  transition: 0.3s,background-position 0.3s 0.3s;
}
 div.crushed-2:hover {
  --x:1;
  background-position: left;
  background-size:1ch 3px;
  transition: 0.3s,background-size 0.3s 0.3s,text-shadow 0.3s 0.3s;
 }

div.crushed-3 {
  --w:10ch;
  --x:0;
  line-height: 1.4em;
  letter-spacing: var(--w);
  width: var(--w);
  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)) 0 0,
    calc(-6*var(--w)) 0 0,
    calc(-7*var(--w)) 0 0,
    calc(-8*var(--w)) var(--x,0) 0,
    calc(-9*var(--w)) var(--x,0) 0;
  background:linear-gradient(currentColor 0 0) top right/2.5ch 0% no-repeat;
  transition: 0s .6s linear,background-size .3s linear;
}
 .crushed-3:hover {
  --x:1em;
  background-size:2.5ch 100%;
  transition: .5s linear,text-shadow .3s .2s linear;
 }

 div.crushed-4 {
  --w:10ch;
  --x:0;
  letter-spacing: calc(10*var(--w));
  width: var(--w);
  text-shadow: 
    calc(-10*var(--w) - var(--x)*1ch) 0 0,
    calc(-20*var(--w) - var(--x)*2ch) 0 0,
    calc(-30*var(--w) - var(--x)*3ch) 0 0,
    calc(-40*var(--w) - var(--x)*4ch) 0 0,
    calc(-50*var(--w) + var(--x)*4ch) 0 0,
    calc(-60*var(--w) + var(--x)*3ch) 0 0,
    calc(-70*var(--w) + var(--x)*2ch) 0 0,
    calc(-80*var(--w) + var(--x)*1ch) 0 0,
    calc(-90*var(--w) + var(--x)*0ch) 0 0;
  background:linear-gradient(currentColor 0 0) center/0 100px no-repeat;
  transition: 0.5s;
}
 div.crushed-4:hover {
  --x:1;
  background-size:calc(var(--w) - 2ch) 100%;
 }

 div.crushed-5 {
  --w:10ch;
  --x:0;
  letter-spacing: calc(10*var(--w));
  width: var(--w);
  text-shadow: 
    calc(-10*var(--w) - var(--x)*1ch) 0 0,
    calc(-20*var(--w) - var(--x)*2ch) 0 0,
    calc(-30*var(--w) - var(--x)*3ch) 0 0,
    calc(-40*var(--w) - var(--x)*4ch) 0 0,
    calc(-50*var(--w) - var(--x)*5ch) 0 0,
    calc(-60*var(--w) - var(--x)*6ch) 0 0,
    calc(-70*var(--w) - var(--x)*7ch) 0 0,
    calc(-80*var(--w) - var(--x)*8ch) 0 0,
    calc(-90*var(--w) - var(--x)*9ch) 0 0;
  background:linear-gradient(currentColor 0 0) left/0% 3px no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) left/100% 100% no-repeat;
  transition: 0.3s,background-size 0.3s 0.3s;
}
 div.crushed-5:hover {
  --x:1;
  background-size:100% 3px;
  -webkit-mask-size:1ch 100%;
  transition: 0.3s 0.3s,background-size 0.3s;
 }

  div.crushed-6 {
  --w:10ch;
  --x:0;
  --y:-0.6em;
  line-height: 1.2em;
  letter-spacing: calc(10*var(--w));
  width: var(--w);
  padding:0 8px;
  text-shadow: 
    calc(-10*var(--w) - var(--x)*1ch) 0 0,
    calc(-20*var(--w) - var(--x)*2ch) 0 0,
    calc(-30*var(--w) - var(--x)*3ch) 0 0,
    calc(-40*var(--w) - var(--x)*4ch) 0 0,
    calc(-50*var(--w) - var(--x)*5ch) 0 0,
    calc(-60*var(--w) - var(--x)*6ch) 0 0,
    calc(-70*var(--w) - var(--x)*7ch) 0 0,
    calc(-80*var(--w) - var(--x)*8ch) 0 0,
    calc(-90*var(--w) - var(--x)*9ch) 0 0;
  background:
    linear-gradient(currentColor 0 0) bottom var(--y) left  0 /3px 0.6em,
    linear-gradient(currentColor 0 0) bottom var(--y) right 0 /var(--d,3px) 0.6em,
    linear-gradient(currentColor 0 0) bottom var(--y) left  0 /100% 3px;
  background-repeat: no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) left/100% 100% no-repeat;
  transition: 0.3s,background-position 0.3s 0.3s;
}
 div.crushed-6:hover {
  --y:0;
  --x:1;
  --d:calc(100% - 1ch + 3px - 16px);
  -webkit-mask-size:calc(1ch + 16px) 100%;
  transition: 0.3s 0.3s,background-position 0.3s;
 }

  div.crushed-7 {
  --w:10ch;
  --x:0;
  --yy:calc(-1ch - 16px);
  letter-spacing: calc(10*var(--w));
  width: var(--w);
  padding:8px;
  text-shadow: 
    calc(-10*var(--w) - var(--x)*1ch) 0 0,
    calc(-20*var(--w) - var(--x)*2ch) 0 0,
    calc(-30*var(--w) - var(--x)*3ch) 0 0,
    calc(-40*var(--w) - var(--x)*4ch) 0 0,
    calc(-50*var(--w) - var(--x)*5ch) 0 0,
    calc(-60*var(--w) - var(--x)*6ch) 0 0,
    calc(-70*var(--w) - var(--x)*7ch) 0 0,
    calc(-80*var(--w) - var(--x)*8ch) 0 0,
    calc(-90*var(--w) - var(--x)*9ch) 0 0;
  background:
    linear-gradient(currentColor 0 0) top    0 right var(--yy) /calc(1ch + 16px) 3px,
    linear-gradient(currentColor 0 0) bottom 0 right var(--yy) /3px 100%,
    linear-gradient(currentColor 0 0) bottom 0 right var(--yy) /calc(1ch + 16px) 3px,
    linear-gradient(currentColor 0 0) bottom 0 left   0        /3px var(--d,0%);
  background-repeat: no-repeat;
  transition: .3s .3s ,background-size .3s;
}
 div.crushed-7:hover {
  --yy:calc(var(--w) - 1ch);
  --x:1;
  --d:100%;
  transition: .3s,background-size .3s .3s;
 }

  
/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family: monospace;
  overflow: hidden;
  white-space: nowrap;
  margin:25px;
  cursor:pointer;
}
div[class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.