Posted By

carriegates on 07/30/09


Tagged

css link pdf external icon mailto


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

vali29
jseltzer
myrebel420
jackssnipplr
neex123


Automatic icons after specified link type


 / Published in: CSS
 

Doesn't work in IE6, so use this to enhance sites rather than use thenm for required information. Very handy for adding a PDF icon behind a link. Make icons very small (16px x 16px) and with transparent space on left and top to make it look more aligned with the text.

  1. a[href*="usask.ca"]:after {
  2. content: ""
  3. }
  4.  
  5. a[href$=".pdf"]:after {
  6. content: " " url("../images/icons/acrobat/acrobat-16.png");
  7. }
  8.  
  9. a.external:after {
  10. content: " " url("../images/misc/external_link.png");
  11. }
  12.  
  13. a[href^="mailto"]:after {
  14. content: " " url("../images/milky_icons/16/74-2.png");
  15. }

Report this snippet  

You need to login to post a comment.