Nav hover Rolling

index.html

    <div class="wrapper">
      <li class="nav-item">
        <a href="/service/">
          <span data-hover="サービス">
            MENU
          </span>
        </a>
      </li>
      <li class="nav-item">
        <a href="/concept/">
          <span data-hover="コンセプト">
            MENUMENU
          </span>
        </a></li>
      <li class="nav-item">
        <a href="/news/">
          <span data-hover="ニュース">
            MENUMENUMENUMENUMENUMENU
          </span>
        </a>
      </li>
    </div>

style.css

li.nav-item a {
  position: relative;
  overflow: hidden;
}
li.nav-item {
  text-align: center;
  font-size: 3em;
}
li.nav-item a {
  width: 100%;
  position: relative;
  outline: none;
  color: DeepSkyBlue;
  letter-spacing: 1px;
  margin: 0 1vw;
}
li.nav-item {
  overflow: hidden;
}
li.nav-item a span {
  width: 100%;
  display: inline-block !important;
  transition: all 0.3s ease;
}
li.nav-item a span::after {
  position: absolute;
  display: block;
  top: 120%;
  width: 100%;
  content: attr(data-hover);
  font-size: 13px;
  letter-spacing: .05em;
  font-weight: 700;
  transform: translate3d(0,0,0);
}
li.nav-item:hover span {
  transform: translateY(-100%);
}