<div class="hover">
<span></span>
</div>

@import url(https://fonts.googleapis.com/css?family=Rubik:400,900);

html {
  font-family: 'Rubik', sans-serif;
}

.hover {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 360px;
  height: 100px;
  overflow: hidden;
  &:before {
    content: 'HOVER';
    position: relative;
    top: 0px;
    left: 0px;
    font-family: 'Rubik';
    font-weight: 900;
    font-size: 97px;
    width: 360px;
    height: 50px;
    display: block;
    overflow: hidden;
    text-align: center;
    transition: 0.3s ease all;
  }
  &:after {
    content: 'HOVER';
    position: relative;
    top: 0px;
    left: 0px;
    font-family: 'Rubik';
    font-weight: 900;
    font-size: 97px;
    line-height: 0px;
    width: 360px;
    height: 50px;
    display: block;
    overflow: hidden;
    text-align: center;
    transition: 0.3s ease all;
  }
  span {
    position: absolute;
    display: block;
    height: 2px;
    width: 0px;
    top: 49px;
    left: 0px;
    background: #000;
    transition: 0.3s ease all;
  }
  &:hover {
    cursor: pointer;
    &:before {
      top: -3px;
      color: #ccc;
    }
    &:after {
      top: 3px;
      color: #aaa;
    }
    span {
      width: 400px;
    }
  }
}