Posted By

brent-man on 08/03/09


Tagged

css hover icon hyperlink


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

ozenyx
ColdCoffee


CSS Hyperlink Icons


 / Published in: CSS
 

URL: http://www.devirtuoso.com/2009/08/making-hyperlink-icons-with-css/

  1. /* For internal tags e.g. #backToTop */
  2. a[href ^= '#']{
  3. padding-left:20px;
  4. background: transparent url(internal.gif) no-repeat scroll left top;
  5. }
  6.  
  7. /* For external links */
  8. a[target = '_blank']{
  9. padding-left:20px;
  10. background: transparent url(external.gif) no-repeat scroll left top;
  11. }
  12.  
  13. /* For Emails */
  14. a[href ^= 'mailto']{
  15. padding-left:20px;
  16. background: transparent url(mail.gif) no-repeat scroll left top;
  17. }
  18.  
  19. /* For PDFs */
  20. a[href $= '.pdf']{
  21. padding-left:20px;
  22. background: transparent url(pdf.gif) no-repeat scroll left top;
  23. }
  24.  
  25. /* For popups */
  26. a[class ~= 'popup']{
  27. padding-left:20px;
  28. background: transparent url(popup.gif) no-repeat scroll left top;
  29. }

Report this snippet  

You need to login to post a comment.