<div>
  <a class="link" target="_blank" rel="noreferrer" href="https://jhancock532.github.io/link-hover-effects/">
    <span class="link--top">Link Split Effect</span>
    <span class="link--bottom">Link Split Effect</span>
  </a>
</div>

body { margin: 0; }
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

div {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
}

.link {
  position: relative;
  display: inline-block;
  padding: 0;
  line-height: 1em;
  margin: 0;
  
}

.link--top {
  position: absolute;
  color: blue;
  top: 0;
  display: inline-block;
  clip-path: polygon(0% 66%, 0% 0%, 100% 0%, 100% 40%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, color 0.5s ease 0.22s;
}

.link--top:after {
  content: "";
  position: absolute;
  
  top: 36%;
  left: 0;
  width: 100%;
  height: 4%;
  background: red;
  transform: rotateZ(-2.2deg) scaleX(0%);
  transform-origin: right top;
  transition: transform 0.2s ease 0.22s;
}

.link--bottom {
  display: inline-block;
  clip-path: polygon(0% 65%, 100% 40%, 100% 110%, 0% 110%);
  text-decoration: underline;
  color: blue;
  transition: color 0.5s ease 0.22s, background-position 0.2s ease 0.22s;
  text-decoration: none;
  background-size: 200% 8%;
  background-position: left bottom;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, red 50%, transparent 50%);
  
}

/*Can't use this type of underscore for multiple lines of text :( 
Good for menu buttons though, this would use a transform animation instead of a background position animation, better performance :)
.link--bottom:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8%;
  background: red;
  transform-origin: left bottom;
  transition: transform 0.2s ease;
}

.link:hover .link--bottom:before {
  transform: scaleX(0%);
}
*/

.link--bottom:after {
  content: "";
  position: absolute;
  
  top: 40%;
  left: 0;
  width: 100%;
  height: 4%;
  background: red;
  transform: rotateZ(-2deg) scaleX(0%);
  transform-origin: right top;
  transition: transform 0.2s ease 0.22s;
}

.link:hover .link--top {
  color: red;
  transform: translateY(-0.5em) rotateZ(-3deg);
  transition: transform 0.5s cubic-bezier(.12,.8,.57,1.00) 0.42s, color 0.5s ease 0.22s;
}

.link:hover .link--bottom {
  color: red;
  background-position: 100% bottom;
  transition: color 0.5s ease 0.2s, background-position 0.2s ease;
}

.link:hover .link--top:after {
  top: 62%;
  transform-origin: left top;
  transform: rotateZ(-2.2deg) scaleX(100%);
}

.link:hover .link--bottom:after {
  top: 65%;
  transform-origin: left top;
  transform: rotateZ(-2.1deg) scaleX(100%);
}