[CSS]aタグリンク下線の色や種類などを変更する方法

CSSスニペット

2014.10.05

CSSでリンクテキストの下線の太さや色を変更するには、text-decoration:noneにした上でborder-bottomプロパティで線の太さや色、種類を設定してあげると簡単に実現できます。

また、borderプロパティでリンクテキストを枠線で囲むようなデザインにすることも可能です。

下線の色と太さを変更
下線の種類を変更
リンクテキストの四方をボーダーで囲む

下線の色と太さを変更

まずはリンクテキストの下線の色と太さを変更する方法です。

a.border	{
	color:#dd0000;
	text-decoration:none;
	border-bottom:3px solid #dd0000;
}

a.border {

color:#dd0000;

text-decoration:none;

border-bottom:3px solid #dd0000;

}

このように表示されます。

WEB ANTENA

下線の種類を変更

次に、リンクテキストの下線の種類を変更する方法です。

a.border2	{
	color:#dd0000;
	text-decoration:none;
	border-bottom:5px dotted #dd0000;
}

a.border2 {

color:#dd0000;

text-decoration:none;

border-bottom:5px dotted #dd0000;

}

直線ではなく、点線のリンクにしてみました。

WEB ANTENA

リンクテキストの四方をボーダーで囲む

最後に、リンクテキストの四方をborderで囲む方法です。

a.border3	{
	color:#dd0000;
	text-decoration:none;
	padding:5px;
	border:1px solid #dd0000;
}

a.border3 {

color:#dd0000;

text-decoration:none;

padding:5px;

border:1px solid #dd0000;

}

リンクテキストの余白を5px設けて、四方を枠線で囲ってみました。

WEB ANTENA