ミギムキ

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

公開日:2018/10/12 更新日:2018/10/11

やりたいこと

マウスオーバーしたときにリンク文字の真ん中から下線が広がるような動きをするサイトがあります
サッとバーを出すだけよりも少しカッコイイ見た目になります

サンプルコード

.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);
}

仕組み、解説、補足など

「transform-origin」を指定することで、真ん中からではなく、左、右から広がるような動きにもできます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。