Advanced Search

Link styles dependent on file format

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* external links
  2. The ^= specifies that we want to match links that begin with the http://
  3. */
  4. a[href^="http://"]{
  5.     padding-right: 20px;
  6.     background: url(external.gif) no-repeat center right;
  7. }
  8.  
  9. /* emails
  10. The ^= specifies that we want to match links that begin with the mailto:
  11. */
  12. a[href^="mailto:"]{
  13.     padding-right: 20px;
  14.     background: url(email.png) no-repeat center right;
  15. }
  16.  
  17. /* pdfs
  18. The $= specifies that we want to match links whose hrefs end with ".pdf".
  19. */
  20. a[href$=".pdf"]{
  21.     padding-right: 20px;
  22.     background: url(pdf.png) no-repeat center right;
  23. }
  24. /* zip
  25. Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
  26. */
  27. a[href$=".zip"]:after{
  28.     content: url(icons/zip.png);
  29. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.