リンク（aタグ）下線の色やデザインを変更する
HTMLのリンク（aタグ）下線の色やデザインを 変更する方法を紹介します。
aタグにはデフォルトで「text-decoration: underline;」 が設定されており、このプロパティで下線が引かれています。
まずはこのデフォルト値を「text-decoration: none;」 に変更して無効にします。 その後に「border-bottom」プロパティに対して色やデザインを 設定します。
下線の色を変更する
下線の色を変更するには「border-bottom」プロパティの色の設定部分に 変更したい色を指定します。
次のサンプルコードでは、 aタグの下線の色をオレンジに設定しています。
a {
text-decoration: none;
border-bottom: 1px solid orange;
}
下線を点線に変更する
下線を点線に変更するには「border-bottom」プロパティのボーダー形状部分に 「dashed」か「dotted」を指定します。
次のサンプルコードでは、 リンク下線を「dashed」と「dotted」に設定しています。
/* dashedを設定 */
a {
text-decoration: none;
border-bottom: 1px dashed;
}
/* dottedを設定 */
a {
text-decoration: none;
border-bottom: 1px dotted;
}
「dotted」では表示が細かすぎて点線かどうかわかりにくく、
「dashed」の方が見やすいようです。
下線の太さを変更する
下線の太さを変更する場合は、ボーダーの太さの設定部分に、 設定したい太さを指定します。
次のサンプルコードでは、ボーダーの太さを「3px」に指定しています。
a {
text-decoration: none;
border-bottom: 3px solid;
}