他のサイトでよく見る下線が伸びてくるアニメーションを試してみました。他のソースを参考にしたわけではないので、もっと効率のいい方法はあるかもしれません。
下記の文字列にマウスオーバーすると下線が表示されます。
UnderLine
（4/20 修正）
クラスの擬似要素（before、after）に対して擬似クラス（hoverなど）を指定することで下線のアニメーションを作成しています。
|
1 |
<p class="underLine">UnderLine</p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*クラス要素[underLine]の擬似要素[after]のマウスオーバー[hover]した時のスタイル*/ .underLine:hover::after{ content: ""; width: 0px; height: 1px; background: black; display: block; animation: moveLine .5s linear forwards; } /*下線のアニメーション*/ @keyframes moveLine{ from{ width: 0px; } to{ width: 100px; } } |
クラスの擬似要素（before、after）に対して擬似クラス（hoverなど）を指定できることを知りました。
これでJavaScriptでのDOM操作なしで実現できます。CSSもJavaScriptも勉強不足です。調べるだけじゃわからないことだったので、自分でいろいろ試すことが大切だと改めて思いました。
( 前やってた方法。何でこんな冗長な処理しか思いつかなかったのか・・・ )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#sample{ font-size: 50px; } /* underlineというクラスが追加された後のスタイル */ #sample.underline:after{ content: ""; display: block; width: 0px; height: 1px; background: black; animation: underline .5s linear forwards; } @keyframes underline{ from{ width: 0px; } to{ width: 300px; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<p id="sample">UnderLine</p> <script type="text/javascript"> /* JavaScript */ var sample=document.getElementById("sample"); sample.addEventListener('mouseover',function(){ sample.classList.add('underline'); }); sample.addEventListener('mouseleave',function(){ sample.classList.remove('underline'); }); /* JQuery */ $('#sample').mouseover(function(){ $(this).addClass('underline'); }); $('#sample').mouseleave(function(){ $(this).removeClass('underline'); }); </script> |
「::after」という擬似要素を使用して文字列の下に下線を表示しました。同じく擬似要素の「::before」を使用すれば文字の上に線を出す事もできます。
::afterのcontentを何も指定せずheightの値を低くし、線のように見せています。heightの値を変更することで線の太さを変えられます。
