<h1><span>Jello is a squishy fellow</span></h1>   

h1 {
  max-width: 300px;
  
  span {
    width: 100%;
    background-image: linear-gradient(
      to bottom,
      rgba(172, 106, 172, 0) 50%,
      rgba(172, 106, 172, 1) 50%,
      rgba(172, 106, 172, 1) 60%,
      rgba(172, 106, 172, 0) 60%,
    );
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: 250ms linear;
  }

  // Demo animation
  span:hover {
    background-size: 100% 100%;
  }
}

// Make it pretty
html { height: 100%;}
body {
  background: #c8c0d5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(172, 106, 172, 1);
  font-family: 'Righteous', cursive;
  font-size: 2rem;
}