《CSS》hover時に線が伸びるアニメーション

公開日：2024年03月06日　最終更新日：2026年1月17日

hover時に下線が伸びるアニメーションを実装します。::beforeでグレーの線、::afterで伸びる線を作成しています。

DEMO リンク HTML <a class="link" href="#">リンク</a> CSS

left: 0をright:0にすると右からのアニメーションに変化します。

.link { color: #111; position: relative; text-decoration: none; } .link::before { background: #dbd9d9; bottom: -5px; content: ''; display: block; height: 1px; left: 0; position: absolute; width: 100%; z-index: -1; } .link::after { background: #cf5747; bottom: -5px; content: ''; display: block; height: 1px; left: 0; position: absolute; transition: all .4s ease-in-out; width: 0; z-index: 0; } .link:hover::after { width: 100%; }

📎📎📎📎📎📎📎📎📎📎