Links with File type

Outside links and file types display

by toubia95

HTML

<p>Un <a href=".pdf">fichier</a> dans une phrase<br />
<a href="http://www.test.fr/sdfs.pdf">lien externe</a><br />
<a href=".zip">lien3</a><br />
<a href=".mp3">lien4</a><br />
<a href=".jpg">lien5</a><br />
<a href=".gif">lien6</a><br />
<a href=".avi">lien7</a><br />
<a href="#">lien8</a><br />
<a href="#">lien9</a><br />
<a href="#">lien10</a><br />
<a href="#">lien11</a><br />
<a href="#">lien12</a><br />
<a href="#">lien13</a><br />
<a href="#">lien14</a><br />
<a href="#">lien15</a><br />
</p>

CSS

@charset "UTF-8";

body {
    font: 62.5%;
}

p {
    font: 0.7em/1.2 verdana, sans-serif;
}
a, a:link, a:visited {
    text-decoration: none;
}

a:hover, a:focus, a:active {
    text-decoration: underline;
}

a:after {
    font-size: 0.8em;
    color: white;
    padding: 0 3px 0 2px;
    margin-left: 2px;
    border-radius: 3px;
    background:silver;
    vertical-align: 0.1em;
}

/* filetypes */
a[href$=".pdf"]:after {
    content:" (Document PDF)";
    color: black;
    padding: 0;
    margin-left: 0;
    border-radius: 0;
    background:none;
    vertical-align: 0;  
}
a[href$=".doc"]:after {content:"doc";}
a[href$=".zip"]:after {content:"zip";}
a[href$=".rar"]:after {content:"rar";}
a[href$=".avi"]:after {content:"avi";}
a[href$=".mov"]:after {content:"mov";}
a[href$=".mp3"]:after {content:"mp3";}
a[href$=".jpg"]:after {content:"jpg";}
a[href$=".jpeg"]:after {content:"jpeg";}
a[href$=".gif"]:after {content:"gif";}
a[href$=".png"]:after {content:"png";}
a[href$=".aiff"]:after {content:"aiff";}
a[href$=".flv"]:after {content:"flv";}

/* liens externes */
a[href^="http"]:after {
    content:"➦";
    color: #999;
    background: none;
    padding: 0;
    font-size: 1.2em;
}