Blog2019.03.11hoshida【CSS】インライン要素にアニメーションで下線を引くホバーアクション2種類Web制作HTML・CSSシェアTweetリンクなどの要素にマウスオーバーすると、下線が引かれていくように表示されるホバーアクションです。CCSのみで実装します。こちらはインライン要素向けです。ブロック要素向けのものはよくありますが、改行しているテキストの下線が引かれていくタイプのものはなかなかないので使えると思います。いうわけで以下がそのコードです。素敵!!仕組みとしては下線を「background-image」によって表示し、その横幅をホバー時に変化させることで実現しています。通常の「background-color」ではなく、「background-image」を使うことで「background-size」で背景のサイズをコントロールできるようにしているわけです。グラデーションを使っているのは「background-image」を使うためです。IE対応ただこちら、IE11ではアニメーションになりません。IE11では「background-size」のトランジションに対応していないのです...このスタイルはアニメーションしないと「text-decoration」しているのと変わらないので素敵さが激減してしまいます。そんな時は以下のIE対応版をご使用ください。「background-size」が対応していないので、「background-position」を使っています。位置を横方向に「-500px」にしておいて、ホバー時に元の位置に戻しています。ところが副作用として、要素の長さが500pxを超えるときに下線が見えてしまうという問題があります。そこでその対策のために、ホバー前は下線の色を0%透過にしています。chromeでみるとホバー離脱時にアニメーションになりません。頑張れば解消するかもしれませんが、ちょっと私はここでリタイアで...。完全に同じ動作ではないですが、どうしてもIEに対応しなければならない時は参考にしてください。サイトのUIにちょっと一工夫したいときなどにぜひ活用してください。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。