マウスホバーで下線が広がるCSSアニメーションサンプル
マウスホバー時にリストのテキストの下に下線がにょきっと広がるように伸びるCSSアニメーションを紹介しています。
マウスホバーでリストに下線が広がるCSSアニメーション
サンプルでは、リストはリンクではありませんがヘッダーメニューやタブメニューなどでもそのまま利用可能です。
アニメーションは、リストのテキスト部分にマウスカーソルを置くと、ニョキッと中央から下線が広がり、マウスカーソルが離れると元に戻るようになっています。
See the Pen CSS | Afterimage animation by yochans (@yochans) on CodePen.
HTMLはシンプルなリストタグを設置しています。
<ul>
<li>PHP</li>
<li>Python</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>本題とは直接関係ありませんが、リストは display: flex で横並び、list-style: none でリストマークは非表示、padding-left: 0 でリストマーク分の余白除去、 text-align: center でテキストは中央揃えとしています。
また、liタグには flex-grow: 1 を付ける事でリストを親要素の横幅いっぱいに表示するようにしています。
リストの下線部分は、liタグに付けた疑似要素 ::before を使っています。
下線部分は、本体のliタグを基準に position で絶対値で位置指定、left: 50%を指定して中央を基準にします。
bottom は位置調整です。
また、横幅の初期値widthで0にしています。
本体の上をマウスホバーした時に、その疑似要素のみにスタイルを指定するにはサンプルコードの通り li:hover::before{} といった指定方法で可能です。
単純に横幅を拡大するだけなのと、特性上、ホバーアウト時のアニメーションが組みやすいという理由から、このサンプルコードでは animationと @keyframes ではなく transition を利用しています。
ul {
display: flex;
list-style: none;
padding-left: 0;
text-align: center;
font-weight: bold;
color: #4169e1;
}
li {
position: relative;
flex-grow: 1;
}
li::before {
content: '';
position: absolute;
left: 50%;
bottom: -5px;
width: 0;
border-bottom: solid 2px #4169e1;
transform: translateX(-50%);
transition: 0.3s;
}
li:hover::before {
width: 50%;
}