We Blog Weblog

アンダーライン

Web

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をいじると動きを変えられるみたいですね。

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP