Your Ad Here

advanced code snippet search

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/

Expand | Embed | Plain Text 
  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.