![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Question-1024x1024.png)
例えば、ヘッダーメニューにカーソルをhoverさせたら、下線が表示されるという実装はよくあります。
この下線ですが、ただパッと表示されるのではなく、アニメーションで実装されることが多いです。
今回は、実務でもよく使われるテキストホバー時のアンダーライン(下線)アニメーションを、11種類ご紹介します。
テキストのホバー下線アニメーションの作り方
まず、基本となるHTMLはこちらです。
<a href="#">じゅんぺいブログ</a>
複数行の解説をするときは文字数を増やしますが、それだけです。
なので、これからご紹介するコードはCSSのみになります。
共通のCSSはこちらです。
a {
color: #333; /* 文字色 */
display: inline-block; /* これがないとリンク範囲が全幅になる */
font-size: 36px; /* 文字サイズ */
position: relative; /* 相対位置指定 */
text-decoration: none; /* デフォルトのテキストの下線を消す */
}
ただし、複数行ではdisplay: inline-block;
とposition: relative;
は不要です。
上からフェードイン
CSSはこちら。
/* 下線のスタイル */
a::after {
background-color: #333; /* 下線の色 */
bottom: 2px; /* 要素の下端からの距離 */
content: ""; /* 要素に内容を追加 */
height: 2px; /* 下線の高さ */
left: 0; /* 要素の左端からの距離 */
opacity: 0; /* 不透明度 */
position: absolute; /* 絶対位置指定 */
transition: all .3s; /* アニメーション効果を追加 */
width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
bottom: -4px; /* 下線を上から下に移動 */
opacity: 1; /* 不透明度を変更してフェードイン */
}
デモはこちら。
See the Pen
テキスト下に上からフェードイン by junpei (@junpei-sugiyama)
on CodePen.
下からフェードイン
CSSはこちら。
/* 下線のスタイル */
a::after {
background-color: #333; /* 下線の色 */
bottom: -8px; /* 要素の下端からの距離 */
content: ""; /* 要素に内容を追加 */
height: 2px; /* 下線の高さ */
left: 0; /* 要素の左端からの距離 */
opacity: 0; /* 不透明度 */
position: absolute; /* 絶対位置指定 */
transition: all .3s; /* アニメーション効果を追加 */
width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
bottom: -4px; /* 下線を上から下に移動 */
opacity: 1; /* 不透明度を変更してフェードイン */
}
先ほどとの違いは、bottom: 2px;
がbottom: -8px;
になっただけです。
hover後より上から始まるか、下から始まるかの違いですね。
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
左から右にスライドで伸びる
CSSはこちら。
/* 下線のスタイル */
a::after {
background-color: #333; /* 下線の色 */
bottom: -4px; /* 要素の下端からの距離 */
content: ""; /* 要素に内容を追加 */
height: 2px; /* 下線の高さ */
left: 0; /* 要素の左端からの距離 */
position: absolute; /* 絶対位置指定 */
transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形(非表示) */
transform-origin: left top; /* 変形の原点を左上に指定 */
transition: transform .3s; /* 変形をアニメーション化 */
width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形(表示) */
}
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
右から左にスライドで伸びる
CSSはこちら。
/* 下線のスタイル */
a::after {
background-color: #333; /* 下線の色 */
bottom: -4px; /* 要素の下端からの距離 */
content: ""; /* 要素に内容を追加 */
height: 2px; /* 下線の高さ */
left: 0; /* 要素の左端からの距離 */
position: absolute; /* 絶対位置指定 */
transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形(非表示) */
transform-origin: right top; /* 変形の原点を右上に指定 */
transition: transform .3s; /* 変形をアニメーション化 */
width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形(表示) */
}
あまり使う機会はないと思いますが、先ほどとの違いはのtransform-origin
をleft
にright
にしただけです。
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
左から右にスライドで伸びて離したら右に消えていく
先ほどは左から右にスライドして、離したら左に戻りましたが、今回は右に消えていきます。
CSSはこちら。
/* 下線のスタイル */
a::after {
background-color: #333; /* 下線の色 */
bottom: -4px; /* 要素の下端からの距離 */
content: ""; /* 要素に内容を追加 */
height: 2px; /* 下線の高さ */
left: 0; /* 要素の左端からの距離 */
position: absolute; /* 絶対位置指定 */
transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形(非表示) */
transform-origin: right top; /* 変形の原点を右上に指定 */
transition: transform .3s; /* 変形をアニメーション化 */
width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
transform-origin: left top; /* 変形の原点を左上に指定 */
transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形(表示) */
}
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
右から左にスライドで伸びて離したら左に消えていく
今度は右から左にスライドして、離したら左に消えていきます。
CSSはこちら。
/* 下線のスタイル */
a::after {
background-color: #333; /* 下線の色 */
bottom: -4px; /* 要素の下端からの距離 */
content: ""; /* 要素に内容を追加 */
height: 2px; /* 下線の高さ */
left: 0; /* 要素の左端からの距離 */
position: absolute; /* 絶対位置指定 */
transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形(非表示) */
transform-origin: left top; /* 変形の原点を左上に指定 */
transition: transform .3s; /* 変形をアニメーション化 */
width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
transform-origin: right top; /* 変形の原点を右上に指定 */
transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形(表示) */
}
先ほどとの違いは、right
とleft
を逆にしただけです。
デモはこちら。
See the Pen
テキスト下に右から左に伸びて離したら左に消えていく by junpei (@junpei-sugiyama)
on CodePen.
中央から両端にスライドで伸びる
CSSはこちら。
/* 下線のスタイル */
a::after {
background-color: #333; /* 下線の色 */
bottom: -4px; /* 要素の下端からの距離 */
content: ""; /* 要素に内容を追加 */
height: 2px; /* 下線の高さ */
left: 0; /* 要素の左端からの距離 */
position: absolute; /* 絶対位置指定 */
transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形(非表示) */
transform-origin: center top; /* 変形の原点を中央上に指定 */
transition: transform .3s; /* 変形をアニメーション化 */
width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形(表示) */
}
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
上下左右からスライドで伸びる
CSSはこちら。
/* 上下の線のスタイル */
a::before,
a::after {
background-color: #333; /* 下線の色 */
content: ""; /* 要素に内容を追加 */
height: 2px; /* 下線の高さ */
position: absolute; /* 絶対位置指定 */
transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形(非表示) */
transition: transform .3s; /* 変形をアニメーション化 */
width: 100%; /* 要素の幅 */
}
/* 上線のスタイル */
a::before {
left: 0; /* 要素の左端からの距離 */
top: -6px; /* 要素の上端からの距離 */
transform-origin: left top; /* 変形の原点を左上に指定 */
}
/* 下線のスタイル */
a::after {
bottom: -6px; /* 要素の下端からの距離 */
right: 0; /* 要素の右端からの距離 */
transform-origin: right top; /* 変形の原点を右上に指定 */
}
/* リンクにホバーした際の上下の線の表示 */
a:hover::before,
a:hover::after {
transform: scale(1, 1); /* 上下の線を横方向に1倍、縦方向に1倍に変形(表示) */
}
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
上下左右からスライドで伸びて離したら反対側に消える
CSSはこちら。
/* 上下の線のスタイル */
a::before,
a::after {
background-color: #333; /* 下線の色 */
content: ""; /* 要素に内容を追加 */
height: 2px; /* 下線の高さ */
position: absolute; /* 絶対位置指定 */
transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形(非表示) */
transition: transform .3s; /* 変形をアニメーション化 */
width: 100%; /* 要素の幅 */
}
/* 上線のスタイル */
a::before {
left: 0; /* 要素の左端からの距離 */
top: -6px; /* 要素の上端からの距離 */
transform-origin: left top; /* 変形の原点を左上に指定 */
}
/* 下線のスタイル */
a::after {
bottom: -6px; /* 要素の下端からの距離 */
right: 0; /* 要素の右端からの距離 */
transform-origin: right top; /* 変形の原点を右上に指定 */
}
/* リンクにホバーした際の上下の線の表示 */
a:hover::before,
a:hover::after {
transform: scale(1, 1); /* 上下の線を横方向に1倍、縦方向に1倍に変形(表示) */
}
/* リンクにホバーした際の上線の表示 */
a:hover::before {
transform-origin: right top; /* 変形の原点を右上に指定 */
}
/* リンクにホバーした際の下線の表示 */
a:hover::after {
transform-origin: left top; /* 変形の原点を左上に指定 */
}
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
複数行のテキストアニメーション
今度は、複数行のテキストアニメーションです。
例えば、先ほど解説した左から右にスライドして伸びるやつだと、このようになってしまいます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これを、全ての文章に下線を引くようにするには、CSSをこのようにします。
a {
background-image: linear-gradient(90deg, #333, #333); /* 線の色 */
background-position: left bottom; /* 線の起点を左・下に設定 */
background-repeat: no-repeat;
background-size: 0 2px; /* 線の横幅を0、縦幅を2pxに */
padding-bottom: 6px; /* 下線を下にズラす */
transition: background-size .6s; /* 変形をアニメーション化 */
}
/* 下線のスタイル */
a:hover {
background-size: 100% 2px; /* 線の横幅を100%にする */
}
これまでとはかなり書き方が変わっています。
デモはこちら。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
もちろん、複数行じゃなくてもOKです。
複数行のテキストアニメーション(グラデーション)
先ほどの複数行では、linear-gradient
というグラデーションで使われるコードがありました。
そして先ほどはlinear-gradient(90deg, #333, #333)
と最初と最後の色を同じにしましたが、これをlinear-gradient(90deg, red, blue)
とするとこのようになります。
See the Pen
複数行のテキストアニメーション(グラデーション) by junpei (@junpei-sugiyama)
on CodePen.
3色以上にすることも可能です。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
グラデーションについては、以下の記事で詳しく解説しています。
-
CSSグラデーションの作り方まとめ【コピペOK!】
続きを見る
まとめ
今回は、テキストホバー時のアンダーライン(下線)アニメーションを11種類ご紹介してきました。
コピペすれば簡単に実装できますが、考えて実装しようとするとなかなかパッとできないと思うので、この記事をブクマしておくといいかと思います。
以上になります。
![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Joy-1024x1024.png)