どういうわけか、リンク用の派手なアニメーションアンダースコアのあるWebサイトに出会い、その効果を実感したかったのです。 しかし、純粋なCSSを使用することは重要です。なぜならば、そのような軽薄なことのために、JavaScriptを追加する価値はなく、インターフェースのパフォーマンスや使いやすさの問題を引き起こす可能性があるからです（ スクロールバーのハイジャックを参照）。
効果は次のようになります。
実装
テキストの下に線を引くことは驚くほど複雑なトピックです。 それはすべて、標準からどれだけ逸脱する準備ができているか、および心配する詳細（たとえば、 文字のリモート要素の受け渡し ）に依存します。
2つの アプローチを検討しました。 実際、どちらも標準のtext-decorationを削除し、 pseudo-elementsを使用してシミュレートされた境界線を追加します 。 この境界線は、 CSSトランジションによってアニメーション化されます。 残念ながら、これらのソリューションには1つの欠点があります。リンクが複数行にわたる場合、正常に機能しません。 下線は最初の行にのみ表示されます。
結局、この欠陥のないShawの CodePenを見つけ、その効果を自分の好みに変えました。
関連するコードは次のとおりです。 repl.itで彼と遊ぶことができます。
a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } a:hover { background-size: 100% 2px; }
このソリューションをより詳細に検討してみましょう。
最初に、標準の
text-decoration
オフにし
text-decoration
。
複数の行をカバーできるため、背景画像を使用する必要があります。 実際の写真を撮ることはできますが、それは単なる線なので、画像を生成する線形グラデーションを使用します。 通常、2つの異なる色の間のグラデーションを作成するために使用されますが、下線をリンクと同じ色にする必要があるため、グラデーションの開始と終了にはcurrentColorを使用します 。
currentColor
は、 colorプロパティの要素の色を使用するようブラウザに指示します。
background-positionを使用して、画像を左下隅に配置します。
0%
の値は水平位置に対応し、
100%
は垂直位置に対応します。
バックグラウンドリピートをオフにして、イメージの複数のインスタンスを防ぎます。
background-sizeを使用して、2ピクセルのゼロ幅と高さを指定します。 幅がゼロの場合、下線はホバー時にのみ表示されます。それ以外の場合、画像は表示されません。
背景に合わせてトランジションを設定すると、プロパティの変更には
0.3
秒かかります。
リンクにカーソルを合わせると、画像の幅が
100%
変化し、完全な下線が作成され、
transition
がアニメーションを提供します。
以上です！ コードの簡潔さには非常に満足しています。 サイトに似たものを追加する場合は、この実装を使用するか、他のアニメーション化された下線効果を参照してください。