CSSでホバー時に中央から両側に広がる下線を実装する方法

1. HTMLの要素を作成します。例えば、<a>要素を使用する場合は以下のようになります。

<a class="underline-expand" href="#">リンク</a>

2. CSSで.underline-expandクラスを定義し、下線の初期状態を設定します。

.underline-expand {
  text-decoration: none; /* デフォルトの下線を無効化する */
  position: relative;
}
.underline-expand::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%; /* 下線の開始位置を中央に設定 */
  width: 0;
  height: 2px; /* 下線の太さを設定 */
  background-color: #000; /* 下線の色を設定 */
  transition: width 0.3s ease; /* 下線のアニメーションを設定 */
}

3. ホバー時に下線を広げるアニメーションを追加します。

.underline-expand:hover::before {
  left: 0; /* 下線の開始位置を0に設定して広げる */
  width: 100%; /* 下線の幅を100%に設定して広げる */
}

これで、.underline-expandクラスを持つ要素にホバーすると、中央から両側に広がる下線が表示されます。