El siguiente fragmento de código es un ejemplo de cómo personalizar los enlaces, mostrando una pequeña imagen que ofrecerá información al visitante sobre el tipo de enlace o documento al que va a acceder. Para ello hacemos uso de los pseudo-selectores de CSS.

/* links externos*/
a[href^="http://"]{
	padding-right: 20px;
	background: url(images/externos.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(images/email.gif) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(images/pdf.gif) no-repeat center right;
}
/* imágenes */
a[href$=".jpg"]{
	padding-right: 20px;
	background: url(images/jpg.gif) no-repeat center right;
}
/* hojas de cálculo excel*/
a[href$=".xls"]{
	padding-right: 20px;
	background: url(images/excel.gif) no-repeat center right;
}