/* ホバーアニメーション（下線） */
.underline {
  position: relative;
}
.underline:hover,
.underline:focus,
.underline:active {
  cursor: pointer;
}
.underline:after {/*疑似要素とアニメーション設定を加えてwidthを0にしておく*/
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;/*自由変更*/
  height: 3px;/*自由変更*/
  background-color: #fff;/*自由変更*/
  width: 0;
  transition: width .4s;/*自由変更*/
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {/*ホバーしたら100%の位置まで伸びる*/
  width: 100%;
}