CSSでマウスオーバー時にラインが走るエフェクト

マウスオーバー時に要素の下にラインが走るエフェクトが面白かったので、実装しようとしたら、なかなかお手軽に実装できるようなので、ご紹介します。

【HTML】

<p class="sample">ライン走るサンプル</p>

 

【CSS】

p.sample{
position:relative;
}
p.sample::before {
background: #1A8388;
content: "";
z-index: 1;
height: 2px;
position: absolute;
left: 0;
right: 0;
bottom: -5px;
transform: scale(0, 1);
transform-origin: right center 0;
-webkit-transform: 1s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
p.sample:hover::before{
transform: scale(1, 1);
transform-origin: left center 0;
}

 

【サンプル】

マウスオーバー時にラインが走るサンプル

 

思いのほかお手軽に実装できるのでおすすめです。