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);
}

Recommended Posts

No comment yet, add your voice below!


Add a Comment

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *