■画像を表示■
content にはテキストだけでなく、画像を指定することも可能。背景画像を指定するのと同じように、
url で画像のパスを記述します。例ではリンク先やファイルタイプによってアイコンを変更しています。
▲ＨＴＭＬ▲
http:// から始まる<a href=”http://google.com”>外部リンク</a>にアイコンをプラス。mailto を使った
<a href=”mailto:hello@example.com”>メールリンク</a>にはメールアイコン。
URLを指定することもできます。<a href=”example.pdf”>PDFファイル</a>など、拡張子で指定もできますよー！
▲ＣＳＳ▲
a:before {
padding: 0 5px;
}
/* 外部リンク */
a[href^=”http://”]:before {
content: url(http://webcreatorbox.com/sample/images/link.svg);
}
/* メール */
a[href^=”mailto:”]:before {
content: url(http://webcreatorbox.com/sample/images/email.svg);
}
/* PDF */
a[href$=”.pdf”]:before {
content: url(http://webcreatorbox.com/sample/images/doc.svg);
}