ミギムキ

[CSS] マウスオーバー時に下線が真ん中から広がるアニメーション

やりたいこと

サンプルコード

.spread_bar { position: relative; text-decoration: none; } .spread_bar:after { position: absolute; bottom: -3px; left: 0px; right: 0px; transform: scaleX(0); height: 1px; background-color: #3388dd; transition: 0.25s; content: ""; } .spread_bar:hover:after { transform: scaleX(1); }
スポンサー広告

仕組み、解説、補足など