メニューリストのhover時に、下線が出現するアニメーションのCSS記載例

.gnav a {
  position: relative;
  text-decoration: none;
  color: #333;
  height: 100vh;
  padding: 27px 0;
  font-weight: bold;
  transition: .3s;
}

.gnav a:hover {
  opacity: 1;
}

.gnav a:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  content:"";
  transition: .3s;
  transform: translateX(-50%);
  background: #333;
}
.gnav a:hover:after {
  width: 100%;
}

*, *:before, *:after {
  box-sizing: border-box;
}