<div class="wrap">
<div class="container">
<div>
<a href="http://somelocation.com/file.doc">Scarica il documento in formato <code>.doc</code></a>
</div>
<div>
<a href="http://somelocation.com/file.pdf">Scarica il documento in formato <code>.pdf</code></a>
</div>
<div>
<a href="http://somelocation.com/file.xls">Scarica il documento in formato <code>.xls</code></a>
</div>
<div>
<a href="http://somelocation.com/file.png">Scarica il documento in formato <code>.png</code></a>
</div>
</div>
</div>
/* Stili per l'esempio */
[href$=".doc"]::after{
content: " " url("https://cdn3.iconfinder.com/data/icons/document-icons-2/30/647719-word-20.png");
}
[href$=".pdf"]::after{
content: " " url("https://cdn3.iconfinder.com/data/icons/document-icons-2/30/647716-pdf-20.png");
}
[href$=".xls"]::after{
content: " " url("https://cdn3.iconfinder.com/data/icons/document-icons-2/30/647714-excel-20.png");
}
[href$=".png"]::after{
content: " " url("https://cdn3.iconfinder.com/data/icons/document-icons-2/30/647715-image-20.png");
}
/* Stili generali */
html, body{
font-family: 'Open Sans', sans-serif;
font-size: 20px;
margin: 0;
padding: 0;
}
.wrap{
margin: 30px;
}
This Pen doesn't use any external JavaScript resources.