Edited at

CSSでアンダーラインアニメーション

More than 1 year has passed since last update.

マウスが乗るとアンダーラインが出現するアニメーション。

*Gif画像の黒い線はソースコードとは関係ないです。


左から右へ

underLine_Left.gif


<p class="text">Underline Left</p>

.text{
position: relative;
display: inline-block;
font-size: 2em;
}

.text:before{
position: absolute;
top: 1.3em;
left: 0;
content: "";
display: inline-block;
width: 0;
height: 2px;
background: #34BBF3;
transition: 2s;
}

.text:hover:before{
width: 100%;
}


右から左へ

underLine_Right.gif


<p class="text">Underline Right</p>


.text{
position: relative;
display: inline-block;
font-size: 2em;
}

.text:before{
position: absolute;
top: 1.3em;
right: 0;
content: "";
display: inline-block;
width: 0;
height: 2px;
background: #34F300;
transition: 2s;
}

.text:hover:before{
width: 100%;
}

.text:beforeにright: 0;と指定する


中央から左右へ

underLine_Center.gif


<p class="text">Underline Center</p>


.text{
position: relative;
display: inline-block;
font-size: 2em;
}

.text:before,
.text:after{
position: absolute;
top: 1.3em;
content: "";
display: inline-block;
width: 0;
height: 2px;
background: #F30034;
transition: 2s;
}

.text:before{
left: 50%;
}

.text:after{
right: 50%;
}

.text:hover:before,
.text:hover:after{
width: 50%;
}


アンダーライン グラデーション

underline_g.gif

コードは流用できます。

background を 下記のように変更すればできます。

background: 

linear-gradient(to right,
dodgerblue, crimson, yellowgreen, orange, purple, red);