中心から外に線が伸びるナビゲーション

テキストナビゲーション

• 中心から外に線が伸びる（下部）

記述例

index.html

<nav class="gnav">
  <ul>
    <li><a href="#" class="current">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

style.css

@charset "UTF-8";

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

/* ------------------------------------
  nav
------------------------------------ */
.gnav {
  margin: 50px 0;
}
.gnav ul {
  display: flex;
  justify-content: center;
  gap: 40px;
  font-size: 18px;
}
  .gnav li a {
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 2em;
  }
  .gnav li a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #1b62c5;
    transform: scale(0, 1);  /*X方向0、Y方向1*/
    transform-origin: center top;  /*上部中央基点*/
    transition: .3s;
  }
  .gnav li a:hover::after, .gnav li a.current::after {
    transform: scale(1, 1);  /*X方向にスケール拡大*/
  }