• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください