<div class="container">
  <div class="Title">
    <h1>Header title
      <div class="Title__highlight"></div>
    </h1>
    <div class="Title__underline"></div>
    <div aria-hidden class="Title__filled">Header title</div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Catamaran:900&display=swap");

html {
  background-color: black;
  height: 100%;
}

body {
  display: flex;
  height: 100%;
}

.container {
  margin: auto;
}

.Title {
  font-family: "Catamaran", sans-serif;
  color: white;
  cursor: pointer;
  position: relative;

  h1 {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-transform: uppercase;
    font-size: 6em;
    -webkit-text-stroke: 1px white;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
  }

  &__underline {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0.3em;
    height: 3px;
    background-color: #17bdef;
    z-index: 5;
    transition: transform 580ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
  }

  &__highlight {
    position: absolute;
    width: 100%;
    bottom: -50;
    left: 0;
    height: 50px;
    background-color: #43ffbe;
    z-index: -1;
    transition: transform 400ms ease;
  }

  &__filled {
    position: absolute;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-size: 6em;
    top: 0;
    clip-path: polygon(0% 100%, 0% 99%, 100% 99%, 100% 100%);
    transition: clip-path 600ms cubic-bezier(0.2, 0.1, 0.15, 1.32);
  }

  &:hover {
    .Title__filled {
      clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%);
    }
    .Title__underline {
      transform: translateY(-9em);
    }
    .Title__highlight {
      transform: translateY(-2.2em);
    }
  }
}