[애니메이션] 글자 선택시 밑줄

html

<ul class="gnb">
  <li><a href="#">about</a></li>
  <li><a href="#">service</a></li>
  <li><a href="#">membership</a></li>
  <li><a href="#">consulting</a></li>
  <li><a href="#">contact</a></li>
</ul>

css

.gnb li {
  display: inline-block;
  margin-right: 60px;
}

.gnb li a {
  color: #888;
  position: relative;
  padding: 10px;
}
.gnb li a:after {
  content: '';
  width: 0%;
  height: 1px;
  position: absolute;
  background: #888;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s;
}

.gnb li a:hover:after,
.gnb li a:focus:after {
  width: 100%;
}

원리
가상요소를 주어 너비를 0%로 주고 호버나 포커스시 100%로 늘린다
포커스는 선택후 탭키를 누르면 자동으로 다음요소가 선택된다