カーソルを合わせるとリンクにアンダーラインが出るアニメーション［はてなブログCSSカスタマイズ］

 今回、テーマを「zeno-teal」に変更したのを機にホバー（リンクにカーソルを合わせる）時に変化が付くようにカスタマイズしました。

 追加したデザイン

ここにカーソルを合わせてみて

↑こんな感じに、ピンクラインが中央から出現します。

※タップするとTOPへ飛びます

TOPのリンク

基本は黒が下線で出てくるので、今回ブログカラーに合わせてピンク色に変更してみました。

貼り付ける場所

「デザイン」→「カスタマイズ」→「デザインCSS」

アニメーションカスタマイズはこれ！

このブログで導入したcss

/* カーソル合わせるとピンクライン */
a {
position: relative;
display: inline-block;
text-decoration: none;
}
a::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #ffc4c4; 
transform: scale(0, 1);
transform-origin: center top;
transition: transform .3s;
}
a:hover::after {
transform: scale(1, 1);
}