アンダーライン

2023年1月5日

あけましておめでとうございます。
ケミストのWeb担当みやのです。
今年もよろしくお願いします。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

2023年1発目は「アンダーライン」について書きます。

リンクのアンダーライン

リンク（<a>タグ）にはデフォルトで下線がついています。

a {
  text-decoration: underline;
}

text-decorationをnoneにすると下線を消すことができます。

a {
  text-decoration: none;
}

ホバーで下線がアニメーション

下線をアニメーションさせるには、いったんtext-decoration:noneで下線を消して、擬似要素afterで下線を追加します。

参考：NxWorld｜CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法

① 左から右へ

マウスホバーで左から下線がにゅっと現れます。

マウスカーソルを外すと左へ消えていきます。

a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #32bdeb;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}

a:hover::after {
  transform: scale(1, 1);
}

② 左から右へ（右へ消える）

これもマウスホバーで左から下線が現れますが、マウスカーソルを外すと右へ消えていきます。

a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #32bdeb;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}

a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

③ 中央から左右へ

ホバー時に中央から左右ににゅっと伸びます。

うちのサイトのサイドメニューはこれですね。

a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #32bdeb;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}

a:hover::after {
  transform: scale(1, 1);
}

まとめ

transform-originをいじると動きを変えられるみたいですね。

今年もよろしくお願いします。