Edit in JSFiddle

<ul>
  <li><a href="#.pdf">PDF-документ</a></li>
  <li><a href="#.doc">Word-документ</a></li>
  <li><a href="#.jpg">Изображение</a></li>
  <li><a href="#.mp3">Аудио</a></li>
  <li><a href="#.mp4">Видео</a></li>
</ul>

body {
  color: #666;
  font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
a {
  background-position: 0 50%;
  background-repeat: no-repeat;
  color: #0087cc;
  padding-left: 22px;
  text-decoration: none;
}
a:hover {
  color: #ff7b29;
}
a[href$=".pdf"] {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/pdf.png");
}
a[href$=".doc"] {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/doc.png");
}
a[href$=".jpg"] {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/image.png");
}
a[href$=".mp3"] {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/audio.png");
}
a[href$=".mp4"] {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/video.png");
}