2019.03.11

【CSS】インライン要素にアニメーションで下線を引くホバーアクション2種類

Web制作

HTML・CSS

リンクなどの要素にマウスオーバーすると、下線が引かれていくように表示されるホバーアクションです。CCSのみで実装します。

こちらはインライン要素向けです。ブロック要素向けのものはよくありますが、改行しているテキストの下線が引かれていくタイプのものはなかなかないので使えると思います。

というわけで以下がそのコードです。

RESULT
HTML
CSS

HBの鉛筆をベキッ！
とへし折る事と同じようにッ
できて当然と思うことですじゃ！

コピー


<p class="linktext01"><span>HBの鉛筆をベキッ！<br />とへし折る事と同じようにッ<br />できて当然と思うことですじゃ！</span></p>

コピー


.linktext01 span{
  background-image: -moz-linear-gradient(top, #000 0%, #000 100%);
  background-image: -webkit-linear-gradient(top, #000 0%,#000 100%);
  background-image: linear-gradient(to bottom, #000 0%,#000 100%);
  background-position: 0px 98%;
  background-size: 0px 2px;
  background-repeat: no-repeat;
   -webkit-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  transition: 0.5s ease;
}
.linktext01:hover span{
  background-size: 100% 2px;
}

コピー

素敵！！仕組みとしては下線を「background-image」によって表示し、その横幅をホバー時に変化させることで実現しています。通常の「background-color」ではなく、「background-image」を使うことで「background-size」で背景のサイズをコントロールできるようにしているわけです。グラデーションを使っているのは「background-image」を使うためです。

IE対応

ただこちら、IE11ではアニメーションになりません。IE11では「background-size」のトランジションに対応していないのです…このスタイルはアニメーションしないと「text-decoration」しているのと変わらないので素敵さが激減してしまいます。

そんな時は以下のIE対応版をご使用ください。

RESULT
HTML
CSS

HBの鉛筆をベキッ！
とへし折る事と同じようにッ
できて当然と思うことですじゃ！

コピー


<p class="linktext02"><span>HBの鉛筆をベキッ！<br />とへし折る事と同じようにッ<br />できて当然と思うことですじゃ！</span></p>

コピー


.linktext02 span{
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,  rgba(0,0,0,0) 100%);
  background-position: -500px 98%;
  background-size: 100% 2px;
  background-repeat: no-repeat;
   -webkit-transition: 0.5s ease;
  -ms-transition:0.5s ease;
  transition: 0.5s ease;
}
.linktext02:hover span{
  background-image: -moz-linear-gradient(top, #000 0%, #000 100%);
  background-image: -webkit-linear-gradient(top, #000 0%,#000 100%);
  background-image: linear-gradient(to bottom, #000 0%,#000 100%);
  background-position: 0 98%;
}

コピー

「background-size」が対応していないので、「background-position」を使っています。予め位置を横方向に「-500px」にしておいて、ホバー時に元の位置に戻しています。

ところが副作用として、要素の長さが500pxを超えるときに下線が見えてしまうという問題があります。そこでその対策のために、ホバー前は下線の色を0%透過にしています。ただそれによって、今度はGoogle chromeでみるとホバー離脱時にアニメーションになりません。より頑張れば解消するかもしれませんが、ちょっと私はここでリタイアで…。完全に同じ動作ではないですが、どうしてもIEに対応しなければならない時は参考にしてください。

以上です。サイトのUIにちょっと一工夫したいときなどにぜひ活用してください。

Web制作