マウスホバーで下からブロックが出現するリンク

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

CSSの解説

<a href="#">下からニョキっと出現</a>

a{
  position: relative;
  text-decoration: none;
  color: inherit;
  margin-bottom: 1rem;
}
a:after{
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 100%;
  height: 0;
  background: #5B718F;
  transition: all .3s;
}
a:hover:after {
  height: 8px;
}

テキストの下に height: 0 の疑似要素 :after を設置しておき、ホバー時のみ height: 0 にして高さを出します。

仕組みとしては下線が伸びるリンクと同じで、幅 width を調整するか高さ height を調整するかの違いです。

応用CSS

ヘッダーメニュー

ヘッダーメニューなどで使用する場合は、以下のようになります。

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

線を引いてからブロックが出現

左から線を引いてからブロックが出現します。

See the Pen Untitled by チータツ ＠ブログについて語る (@cheese_fuji) on CodePen.

おすすめの使い方

• ヘッダーメニューなど
• 横並びのリスト型リンク