スポンサード

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

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

下線の色と太さを変更

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

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

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

WEB ANTENA

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

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

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

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

WEB ANTENA

スポンサード