CSS: underline(下線)の「色」や「太さ」を指定する

CSS underline の「」や「太さ」を指定するには border-bottom プロパティを使用します。

通常、リンク部分のunderline(下線)は 「text-decoration: underline」となっています。

ですが、text-decoration プロパティでは「太さ」や「色」まではコントロールできないので、 「text-decoreation: none」と非表示にして、代わりに border-bottom プロパティで下線を表します。

underlineの色や太さを指定するサンプル

色が「darkblue」、太さが「3px」の underline は下のようになります。

リンクテキスト


a{
    text-decoration: none;
    border-bottom: 3px solid darkblue;
}

この方法なら、下線の「色」、「太さ」、「スタイル」をいろいろと自由に表現できます。

下は、色が「red」、太さが「2px」、スタイルが「点線」 の underline です。

リンクテキスト


a{
    text-decoration: none;
    border-bottom: 2px dotted red;
}