【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;
}

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト