In CSS3 you can style links depending on some rules also called attribute selectors. This is convenient if you have files in PDF, Zip among other and you want to display a small icon near it. This snippet shows a small icons next to your links telling the user if it is an external link, an email, a pdf, a zip or whatever you would like.
/* external links The ^= specifies that we want to match links that begin with the http:// */ a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* emails The ^= specifies that we want to match links that begin with the mailto: */ a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs The $= specifies that we want to match links whose hrefs end with ".pdf". */ a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; } /* zip Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after */ a[href$=".zip"]:after{ content: url(icons/zip.png); }
Geef een reactie