リンクの装飾

リンクに様々な装飾を付けるには、疑似クラスを使います。

疑似クラスには、次のようなものがあります。

:link	未訪問のリンク
:visited	訪問済みのリンク
:active	アクティブな状態
:hover	カーソルが上に乗っており、且つアクティブでない要素

これ以外にも:focusや:first-childなどが定義されています。

カーソルが乗った時のみ下線をつける

下線を付けるには、text-decorationを使う方法と borderを使う方法が考えられます。

text-decorationを使用する場合、次のように記述します。

a:link {
    color:#999999;
    text-decoration:none;
}
a:hover [
    color:#999999;
    text-decoration:underline;
}
a:visited {
    color:#999999;
    text-decoration:none;
}

borderを使用する場合、次のように記述します。 borderを使用した場合、下線の色を変えたりすることもできます。

サンプル:Home

a:link,a:visited {
    color:#999999;
    text-decoration:none;
}
a:hover [
    color:#999999;
    text-decoration:underline;
    border-bottom: 1px solid #F6800B;
}