リンクの装飾

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

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

これ以外にも: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を使用した場合、下線の色を変えたりすることもできます。

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