ホバー時にアンダーラインが表示されるメニュー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>ナビゲーションの各項目を中央揃え - flexbox</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="gnav">
  <ul>
    <li><a href="#" class="current">HOME</a></li>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">業務内容</a></li>
    <li><a href="#">アクセス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav><!-- /.gnav -->
</body>
</html>

@charset "UTF-8";

/* ------------------------------------
  reset
------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------
  body
------------------------------------ */
body {
  color: #333;
  font-size: 18px;
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height: 1.6;
}

/* ------------------------------------
  nav
------------------------------------ */
.gnav {
	margin-top: 50px;
}
.gnav > ul {
    display: flex;
    justify-content: center;
  }
  .gnav a {
    display: block;
    margin: 0 10px;
    border-bottom: 3px solid transparent;
  }
  .gnav a:hover, a.current {
    color: #c72712;
    border-bottom: 3px solid #c72712;
  }