ホバー時CSSアンダーアニメーション

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

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

▲左から右へ

●ＨＴＭＬ
<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%;
}

 

 

▲右から左へ▲

●ＨＴＭＬ
<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;と指定する

 

 

▲中央から左右へ▲

●ＨＴＭＬ
<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)；