文字がぶれないホバーアクションのポイント｜borderでlistを囲う場合などなど

manami

こんにちは、田中真奈美（ @momo29_aus ）です。

この記事では自身の記録も兼ねて、実際のコードとスクリーンショットを載せて各実装を残しています。

▼この記事で紹介していること

「listをborder囲う動きを、hoverしたときに文字がブレないようにしたい！」

→【解決方法】hover前にtransparent（透明）のborderを設定すればOK

▼CodePenの活用の仕方についてはこちらの記事で解説しています。
※準備中

See the Pen
yLeQMXL by manami (@momo29_aus)
on CodePen.

ちなみにhoverする前（通常時）にborderを書いていないと、こんな風にhoverするたびに文字が揺れてしまいます。

文字だけでなく上下の余白も微妙にモリモリしてしまって見にくいです。

See the Pen
not border by manami (@momo29_aus)
on CodePen.