はじめに

「元々リンクテキストに下線が引いてあって、マウスホバーするとその下線が左から右へアニメーションする。」

そんなあるある要件を満たすためにいろいろと試してみました、が、悪しからず、完璧なIE11対応はできなかったので諦めました、という残念な記事です。

ぜひ、ナレッジがある方はお知恵を拝借できれば幸いです。

実際にやってみた

ベースとなるHTMLは以下の通りです。

<a>リンクテキスト<br>2行目です</a>

まずはscale()で実装

widthを使ったりいろいろ実装方法はあると思いますが、まず私はtransform: scaleX()で実装しました。
transform-originを変えればアニメーションの起点を簡単に真ん中にしたり右端にしたり変えられると考えたからです。

a{position:relative;display:inline-block;text-decoration:none;}a::after{position:absolute;bottom:0;left:0;content:"";width:100%;height:1px;background:#000;transform:scaleX(1);transform-origin:lefttop;}a:hover::after{animation:leftToRightUnderline0.3s;}@keyframesleftToRightUnderline{from{transform:scaleX(0);}to{transform:scaleX(1);}}

See the Pen LeftToRight Mark.1 by heeroo-ymsw (@heeroo-ymsw) on CodePen.

疑似要素afterで高さ1pxの線を作ってテキストの下に配置し、左端を起点にanimationで要素を拡大させています。
今回はもともと下線が引いてあるので、マウスホバーを外したときのアニメーションはありません。

しかし、このコードには問題があり、テキストが2行以上になるとそのブロックの下に下線がひかれ、「テキストの下線」ではなくなってしまいます。

複数行にも対応させる

a{padding-bottom:3px;background:linear-gradient(#000,#000)leftbottom/100%1pxno-repeat;text-decoration:none;}a:hover{animation:leftToRightUnderline0.3s;}@keyframesleftToRightUnderline{from{background-size:0%1px;}to{background-size:100%1px;}}

See the Pen LeftToRight Mark.2 by heeroo-ymsw (@heeroo-ymsw) on CodePen.

疑似要素を用いるよりもスッキリした印象です。

linear-gradient()とbackground-sizeで幅100%/高さ1pxの下線を書いておき、background-sizeをアニメーションさせることで実現しています。

しかし、こちらにも問題点が。

IE11はbackground-sizeのtransition/animationに対応していません。

…

IE11に対応させる

a{padding-bottom:3px;background:linear-gradient(#000,#000)leftbottom/100%1pxno-repeat;text-decoration:none;}a:hover{animation:leftToRightUnderline0.3s;}@keyframesleftToRightUnderline{from{background-position:-190pxbottom;}to{background-position:leftbottom;}}

See the Pen LeftToRight Mark.3 by heeroo-ymsw (@heeroo-ymsw) on CodePen.

background-positionで左にずらしとくパターンです。
ただし、これも残念ながら万能策ではありません。
むしろ、問題が増えました。

• 下線を適応させたい要素に応じて、ずらし具合(例だと-190pxの部分)を調整しなくてはいけない
• ずらし具合の調整が地味に面倒
• アニメーション方向が変わった場合などの汎用性が低い

そのうちコーダーは考えるのをやめた

今回は以下の言い訳とともにIE11を切り捨て、background-sizeで実装しました。

• 調べたらpolyfillもあったが、案件でそれを検証している時間がない
• background-positionを使っても、実装当初はリンクが増える、もしくはテキストが変更になる可能性が大いにあり、その度にズレを調整していられない
  • ついでにレスポンシブ対応&PCサイズのときはリキッド対応の必要がある

まとめ

テキストの下線アニメーションの実装を行い、現段階では、background-sizeのanimation / transitionでの実装が最適解かと感じました。

別の解があれば是非お教えいただきたいです。