mailtoでメールを送るようなリンクにメールアイコンを表示させたい例。

ここはhrefの値が"mailto:~"になってるテキストリンクです。

特定のtitleの値が指定されているものだけボーダー色を指定する例。

写真:愛用のクイックルワイパーハンディ←この画像を括ってるpにはtitleの値に"【新商品:なんたらかんたら入荷しますた!】"って入ってます。
※写真は愛用しているクイックルワイパーハンディですが、本文には関連性はありません。でもスゲー気に入ってます。オススメです。

このサンプルのCSS

【CSS】
a[href^="mailto:"]{
	background:url(../hoge/letter.png) no-repeat right center;
	padding:0 20px 0 0;
	}
p[title^="【新商品"] img{
	border:2px solid #630; /* 茶色のボーダー */
	padding:5px;
	} 

このサンプルのHTML

<p><a href="#">ここはhrefの値が"#"になってるテキストリンクです。</a></p>
<p><a href="mailto:example@example.com">ここはhrefの値が"mailto:~"になってるテキストリンクです。</a></p>

<p title="【新商品:なんたらかんたら入荷しますた!】">
<img src="hoge.jpg" width="225" height="266" alt="写真:愛用のクイックルワイパーハンディ" />
</p>