DN*BLOG

2008.2.21

CSSで外部リンクだけに画像をつける

この方法はすごく便利だと思ったのでメモがてらに。。。

CSSソース

a[rel="external"] {
	padding-right:20px;
	margin-right:3px;
	background:url(img/icon_link.gif) no-repeat right center;
}

外部リンクのa要素のみに、rel=”external”を指定しておけば外部リンクだけに画像が表示されます。
ちなみに、このサイトでも外部リンクには右端に画像がついてます。

「margin-right:3px;」
このmargin-rightは右に要素があった場合にキツキツになってしまうのを防ぐためです。

こういうちょっとした事でもユーザビリティにつながると思います。

参考にさせていただいたサイト
WWW WATCH

FavoriteLoadingAdd to favorites

Category : CSS , Web Design

関連する記事