デフォルトでは、Webブラウザには、特定のHTML要素に適用する特定のCSSスタイルがあります。これらのデフォルトをサイト独自のスタイルシートで上書きしないと、デフォルトが適用されます。ハイパーリンクの場合、デフォルトの表示スタイルは、リンクされたテキストが青色で下線付きであることです。ブラウザは、サイトの訪問者がどのテキストがリンクされているかを簡単に確認できるようにします。多くのWebデザイナーは、これらのデフォルトスタイル、特に下線を気にしません。ありがたいことに、CSSはそれらの下線の見た目を変更したり、それらを完全に削除することを容易にします。
テキストリンクのアンダーラインの削除
下線が引かれたテキストは、下線が引かれていないテキストを読むのが難しい場合があります。さらに、多くのデザイナーは、下線付きのテキストリンクの外観を気にしません。このような場合は、これらの下線を完全に削除することをお勧めします。
テキストリンクから下線を削除するには、CSSプロパティtext-decorationを使用します。これを行うために書くCSSは次のとおりです。
a {テキスト装飾：なし; }
その1行のCSSでは、すべてのテキストリンクから下線を削除します。これは非常に一般的なスタイル（要素セレクタを使用）ですが、デフォルトのブラウザスタイルよりもさらに細分化されています。これらのデフォルトスタイルは、アンダーラインを作成するものなので、上書きする必要があります。
アンダーラインの削除に関する注意
視覚的に、アンダーラインの除去はあなたが達成したいものと正確に同じであるかもしれませんが、これを行うときには慎重でなければなりません。下線付きのリンクの外観が気に入っているかどうかに関係なく、どのテキストがリンクされているか、リンクされていないかを明示することはできません。下線を外したり、デフォルトの青色リンクの色を変更したりする場合は、リンクされたテキストを目立たせるようなスタイルに置き換える必要があります。これにより、サイトの訪問者にとってより直感的な体験が可能になります。
非リンクに下線を引かない
リンクとアンダーラインについての別の注意は、リンクを強調する方法としてリンクではないテキストに下線を引かないでください。人々は下線付きのテキストがリンクになることを期待しているので、強調する（太字またはイタリック体にするのではなく）コンテンツを強調すると、間違ったメッセージを送り、サイトユーザーを混乱させます。
アンダーラインをドットまたはダッシュに変更する
テキストリンクの下線を維持し、その下線のスタイルをデフォルトのルックから変更する場合は、これも可能です。その実線の代わりに、点を使ってリンクに下線を引くことができます。これを行うには、下線を削除しますが、border-bottomスタイルのプロパティに置き換えます。
a {テキスト装飾：なし; border-bottom：1px点在; }
標準のアンダーラインを削除したので、点線のものだけが表示されます。
あなたはダッシュを得るために同じことをすることができます。 border-bottomスタイルを破線に変更してください：
a {テキスト装飾：なし; border-bottom：1px破線。 }
下線の色を変更する
リンクに注意を喚起する別の方法は、下線の色を変更することです。色があなたの配色に合っていることを確認してください。
a {テキスト装飾：なし; border-bottom：1pxソリッドレッド; }
ダブルアンダーライン
二重下線を使用するトリックは、境界の幅を変更する必要があることです。 1pxの幅の枠を作成すると、1本の下線のように見える2本の下線で終わります。
a {テキスト装飾：なし; border-bottom：3px double; }
既存の下線を使用して、点線のいずれかのような他のフィーチャと二重下線を付けることもできます。
a {border-bottom：1px double; }
リンクステートを忘れないでください
ホバー、：アクティブ、または：訪問済みなどの異なる状態で、リンクにボーダーボトムスタイルを追加できます。これは、その "ホバー"擬似クラスを使用すると、訪問者にとって素晴らしいロールオーバースタイルのエクスペリエンスを作り出すことができます。リンク上にマウスを移動すると、2番目の点線の下線が表示されます。
a {テキスト装飾：なし; } a：hover {border-bottom：1px dotted; }
Jennifer Kryninのオリジナル記事。ジェレミージラール編集
