既製のテーマを使用するのではなく、 個人のWebサイトをゼロから作成する利点の1つは、デフォルトのブラウザー設定から始めて、徐々に独自の色を追加することです。 サイトが肥大化しないようにしていますが、パーソナライズは重要です。 Hacker NewsとCraigslistの Spartanページと、 古いMySpaceの混雑との間で妥協点を見つける必要があります。

どういうわけか、リンク用の派手なアニメーションアンダースコアのある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がアニメーションを提供します。

以上です！ コードの簡潔さには非常に満足しています。 サイトに似たものを追加する場合は、この実装を使用するか、他のアニメーション化された下線効果を参照してください。