2,094wonder

中国人夫とのJAPAN LIFE

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

f:id:japantk:20190501212202j:plain

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

 

 

追加したデザイン

 

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

 

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

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

 

TOPのリンク

f:id:japantk:20190501211142p:plain

 

▼参考サイト

www.nxworld.net

とってもおしゃれで素敵なカスタマイズが掲載されています!

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

 

貼り付ける場所

「デザイン」→「カスタマイズ」→「デザイン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);
}

 

▼合わせて読みたい記事

www.coconatsuco.life