Blog

HOME > Web > css > 【CSS】hover時の下線を動かす方法

【CSS】hover時の下線を動かす方法

2019/03/12

css

備忘録です。

リンクhover時に下線が右から左に動いたり中央から左右に伸びるアレの方法です。

参考サイト
リンク要素のhover時に下線をCSSでアニメーション表示させる方法

html

<ul>
  <li><a href="">MENU01</a></li>
  <li><a href="">MENU02</a></li>
  <li><a href="">MENU03</a></li>
  <li><a href="">MENU04</a></li>
  <li><a href="">MENU05</a></li>
</ul>

下線が左から右に引かれるアニメーション

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 5px;
}
a {
  display: block;
  padding: 0 0 5px;
  text-decoration: none;
}
a::after {
  border-bottom: solid 2px #f00;
  bottom: 0;
  content: "";
  display: block;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a:hover::after {
  width: 100%;
}

下線が右から左に引かれるアニメーション

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 5px;
}
a {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}
a::after {
  border-bottom: solid 2px #f00;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a:hover::after {
  width: 100%;
}

下線が中央から左右に引かれるアニメーション

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 5px;
}
a {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}
a::before,
a::after {
  border-bottom: solid 2px #f00;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a::before {
  left: 50%;
}
a::after {
  right: 50%;
}
a:hover::before,
a:hover::after {
  width: 50%;
}

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ