【CSS】ホバー時にアンダーラインが現れるアニメーションのまとめ

ヘッダーメニューをホバーすると、アンダーラインが下から現れたり、左から伸びて現れたりするアニメーションを実装してみたい。
ホームページのヘッダーメニューをオシャレにしたい。

そのような方に向けた記事でございます。
 

本記事の内容

アニメーションを実装する前に、ヘッダーのグローバルメニューとアンダーラインを準備します。

ヘッダーのグローバルメニューの作り方は、別記事で紹介していますので、詳しいコードはそちらを参考にしてください。

【コピペOK】ヘッダーのグローバルメニューのデザイン【CSSおまけ有】

HTMLとCSSを用いた、簡単なヘッダーとそのグローバルメニューの作り方を解説します。コピペしていろんなデザインにアレンジしてみてはいかがでしょうか。おまけは、メニューをホバーした時にアンダーラインが現れるアニメーションのコードです。

hakenblog.com

擬似要素でアンダーラインを記述します。

a {
position: relative; /*アンダーラインの位置を決めるための基準 */
}

a::after {
position: absolute; /*親要素であるaタグを基準に位置を指定*/
left: 0;            /*アンダーラインを各メニュー（aタグ）の左端に指定*/
content: '';        /*本来は、擬似要素に入るテキストなどを’’内に指定。今回はアンダーラインなので何も記載しない*/
width: 100%;        /*アンダーラインを各aタグの幅に合わせる*/
height: 2px;        /*アンダーラインの高さ（太さ）*/
background: #000000;/*アンダーラインの色*/
}

position: relative;で、各ヘッダーメニューのaタグを基準とし、left: 0;にアンダーラインが位置します。

この状態では、見本のようにアンダーラインがヘッダーの上端にあります。

このコードに追記していく形で、8つのアニメーションを解説していきます。
 

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;       /*アンダーラインが位置する、各リストの下端からの高さ　ヘッダーの下端に合わせています*/
visibility: hidden; /*ホバー前に、アンダーラインを可視化しない*/
}

a:hover::after {
visibility: visible; /*ホバー後、アンダーラインを可視化する*/
}

ちなみに、下記を追記すると、アンダーラインが徐々に現れます。

a::after {
opacity: 0;
}

a:hover::after {
opacity: 1;       /*アンダーラインが透明な状態からアニメーションが開始され、ホバーを話して終了する際も、徐々に透明な状態に戻る。*/
transition: 0.3s; /*変形の時間*/
}

余談ですが、visibilityの値をhiddenにした場合の注意点を説明します。

値をhiddenにするとその要素がアクセシビリティーツリー削除されます。

今回は問題ないですが、contentにテキストを入れた場合、読み上げ技術でアナウンスされなくなります。

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: 20px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
opacity: 0;
visibility: hidden;
transition: 0.3s;
}

a:hover::after {
visibility: visible;
bottom: 12px; /*アニメーションが止まる位置*/
opacity: 1;
}

ヘッダー下端から20pxの位置を開始点とし、12pxの位置までの5pxを、アンダーラインが降りてきます。
 

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: 4px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
opacity: 0;
visibility: hidden;
transition: 0.3s;
}

a:hover::after {
visibility: visible;
bottom: 12px;
opacity: 1;
}

「その②：上からフェードイン」のアニメーション開始位置を変更することで、下からフェードインするアニメーションを実装できます。
今回の場合、bottom: 4px;にすることで、ヘッダー下端4pxのところからアンダーラインが現れます。
上からフェードインでは、20px-12px=8pxの移動だったので、同じ距離（12px-4px=8px）を置いています。
 

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}

アンダーバーの高さが2pxであるため、Bottom: -1px;とすることで、アンダーラインの真ん中（高さ1px）の位置にヘッダーの下端が重なるようにしています。
transform-origin: left top;とすることで、左に戻るができます。

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}

「その①：左からアンダーラインがフェードイン」transform-origin: left top; を transform-origin: right top;に変更すると、右からフェードインするアンダーライン になります。
 

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}

transform-origin: right topとすることで、ホバーを外すと右にフェードアウトします。

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1);      /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: right top; /*右から左に向かう*/
}

transform-origin: left topとすることで、ホバーを外すと左にフェードアウトします。
 

a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;   /*変形の時間*/
}

a:hover::after {
transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}

transform-origin: center topとすることで、真ん中を原点として伸長します。

本記事では、分かりやすいようにクラスを設けず、セレクタのみを対象に記述していきました。

Webページによっては、アンダーラインを実装しない箇所にもaタグがあると思うので、適宜クラスを設けていただけるといいです。
 

とはいえ、どのようなヘッダーの形であり、メニューのaタグをセレクタとしてデザインを記述します。

時間を変えたり、アンダーラインの位置を変えるなど、ご自身が作りたいページに合わせてカスタマイズしてみてください。

仕事に直結するスキルを学びたい方は、クラウドワークス運営のオンラインスクールへ。入会金無料で、無料相談会実施中です。