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

.broken-1 {
  color: #0000;
  padding: 10px;
}
.broken-1:before,
.broken-1:after {
  content: attr(data-text);
  padding: inherit;
  color: #000;
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 50%);
  transition:.3s .3s, transform .3s;
}
.broken-1:after {
  clip-path: inset(50% 0 0);
}
.broken-1:hover:before,
.broken-1:hover:after {
  color: #fff;
  background: #000;
  transition: .3s, transform .3s .3s;
}
.broken-1:hover:before {
  transform: translate(5px,-5px);
}
.broken-1:hover:after {
  transform: translate(-5px,5px);
}

.broken-2 {
  color: #0000;
  padding: 10px;
}
.broken-2:before,
.broken-2:after {
  content: attr(data-text);
  padding: inherit;
  color: #000;
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0,100% 0,100% 100%);
  transition:.3s .3s, transform .3s;
}

.broken-2:after {
  clip-path: polygon(0 0,0 100%,100% 100%);
}
.broken-2:hover:before,
.broken-2:hover:after {
  color: #fff;
  background: #000;
  transition: .3s, transform .3s .3s;
}
.broken-2:hover:before {
  transform: translate(15px);
}
.broken-2:hover:after {
  transform: translate(-15px);
}

.broken-3 {
  color: #0000;
  padding: 10px;
}
.broken-3:before,
.broken-3:after {
  content: attr(data-text);
  padding: inherit;
  color: #000;
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
  transform-origin: bottom;
  transition:.3s .3s, transform .3s;
}

.broken-3:after {
  clip-path: inset(0 0 0 50%);
}
.broken-3:hover:before,
.broken-3:hover:after {
  color: #fff;
  background: #000;
  transition: .3s, transform .3s .3s;
}
.broken-3:hover:before {
  transform: rotate(-10deg);
}
.broken-3:hover:after {
  transform: rotate(10deg);
}

.broken-4 {
  color: #0000;
  padding: 10px;
}
.broken-4:before,
.broken-4:after {
  content: attr(data-text);
  padding: inherit;
  color: #000;
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 50% 0);
  transform-origin: left;
  transition:.3s, transform 0s;
}

.broken-4:after {
  clip-path: inset(50% 0 0 0);
}
.broken-4:hover:before,
.broken-4:hover:after {
  color: #fff;
  background: #000;
  transition: .3s, transform .3s .3s cubic-bezier(.2,100,.8,100);
}
.broken-4:hover:before {
  transform: rotate(-.05deg);
}
.broken-4:hover:after {
  transform: rotate(.05deg);
}


.broken-5 {
  color: #0000;
  padding: 10px;
}
.broken-5:before,
.broken-5:after {
  content: attr(data-text);
  padding: inherit;
  color: #000;
  background: linear-gradient(currentColor 0 0) left/0% 4px no-repeat;
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 50%);
  transition:.3s .3s, transform .3s;
}
.broken-5:after {
  clip-path: inset(50% 0 0);
}
.broken-5:hover:before,
.broken-5:hover:after {
  background-size: 100% 4px;
  transition: .3s, transform .3s .3s;
}
.broken-5:hover:before {
  transform: translateY(-5px);
}
.broken-5:hover:after {
  transform: translateY(5px);
}

.broken-6 {
  color: #0000;
  padding: 10px;
}
.broken-6:before,
.broken-6:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: #000;
  background: 
    linear-gradient(currentColor 0 0) left/0% 4px,
    linear-gradient(currentColor 0 0) top /4px 0%;
  background-repeat: no-repeat;
  clip-path: inset(0 50% 50% 0);
  transition:.3s .3s, transform .3s;
}
.broken-6:after {
  clip-path: polygon(50% 0,100% 0,100% 100%,0 100%,0 50%,50% 50%);
}
.broken-6:hover:before,
.broken-6:hover:after {
  background-size: 50% 4px,4px 50%;
  transition: .3s, transform .3s .3s;
}
.broken-6:hover:before {
  transform: translate(-10px,-10px);
}

.broken-7 {
  color: #0000;
  padding: 10px;
  background: 
    linear-gradient(#000 0 0) 0 calc(50% + 1px)/0% 2px no-repeat,
    linear-gradient(#0000 50%,#000 0);
  background-clip:padding-box, text;
  -webkit-background-clip: padding-box, text;
  transition: .3s .3s;
}
.broken-7:hover {
  background-size: 100% 2px,auto;
  transition: .3s;
}
.broken-7:before,
.broken-7:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: #000;
  background: 
    linear-gradient(currentColor 0 0) left/0% 4px,
    linear-gradient(currentColor 0 0) top /4px 0%;
  background-repeat: no-repeat;
  clip-path: inset(0 50% 50% 0);
  transition:.3s .3s, transform .3s;
}
.broken-7:after {
  clip-path: inset(0 0 50% 50%);
}
.broken-7:hover:before,
.broken-7:hover:after {
  background-size: 100% 4px,4px 50%;
  transition: .3s, transform .3s .3s;
}
.broken-7:hover:before {
  transform: translate(-10px,-10px);
}
.broken-7:hover:after {
  transform: translate( 10px,-10px);
}
  

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