【使用例】リンク先の拡張子を識別して、リンク文字右にアイコンを表示「Iconize Textlinks with CSS」

最終更新日: 2008年8月7日 12:10

使用例

ソース(<head>内)

<link rel="stylesheet" type="text/css" media="screen" href="iconize.css" />

ソース(<body>内)

<ul>
<li><a href="#noname.doc">.doc</a> - <a href="#noname.rtf">.rtf</a></li>
<li><a href="#noname.txt">.txt</a></li>
<li><a href="#noname.pdf">.pdf</a></li>
<li><a href="#noname.xls">.xls</a></li>
<li><a href="#noname.xpi">.xpi</a> <small>(Firefox Extension)</small></li>
<li><a href="#noname.rss">.rss</a> - <a href="#noname.atom">.atom</a></li>
<li><a href="#noname.opml">.opml</a></li>
<li><a href="#noname.vcard">.vcard</a></li>
<li><a href="#noname.exe">.exe</a></li>
<li><a href="#noname.dmg">.dmg</a> - <a href="#noname.app">.app</a></li>
<li><a href="#noname.pps">.pps</a></li>
<li><a href="#noname.ical">.ical</a> <small>(changed)</small></li>
<li><a href="#noname.jpg">.jpg</a> - <a href="#noname.gif">.gif</a> - <a href="#noname.png">.png</a> - <a href="#noname.bmp">.bmp</a> - <a href="#noname.svg">.svg</a> - <a href="#noname.eps">.eps</a></li>
<li><a href="#noname.swf">.swf</a> - <a href="#noname.fla">.fla</a></li>
<li><a href="#noname.css">.css</a></li>
<li><a href="#noname.mp3">.mp3</a> - <a href="#noname.wav">.wav</a> - <a href="#noname.ogg">.ogg</a> - <a href="#noname.wma">.wma</a> - <a href="#noname.m4a">.m4a</a></li>
<li><a href="#noname.zip">.zip</a> - <a href="#noname.rar">.rar</a> - <a href="#noname.gzip">.gzip</a> - <a href="#noname.bzip">.bzip</a> - <a href="#noname.ace">.ace</a></li>
<li><a href="#noname.ttf">.ttf</a></li>
<li><a href="#noname.mov">.mov</a> - <a href="#noname.wmv">.wmv</a> - <a href="#noname.mp4">.mp4</a> - <a href="#noname.avi">.avi</a> - <a href="#noname.mpg">.mpg</a></li>
<li class="new"><a href="#noname.phps">.phps</a></li>
<li class="new"><a href="#noname.torrent">.torrent</a></li>
</ul>