DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

CSS - Show Application Icon Next Link

01.02.2007

| 3507 views |

        // This CSS code will show the appropriate icon next to a HREF link

<!DOCTYPE html>

<head>
<style type="text/css">
p {font: normal 1em/1.2em tahoma;}

/* all A tags whose HREF attribute ends in .pdf */
a[href$='.pdf'] { 
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}

/* all A tags whose REL attribute = pdf */
a[rel='pdf'] { 
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}

/*  all A tags whose REL attributes has the string pdf inside */
a[rel*='pdf'] { 
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}


/* all A tags whose HREF attribute starts with mailto: */
a[href ^="mailto:"] {
	padding-left: 18px;
    background: transparent url(mailto.gif) no-repeat center left;
   
}

/* all A tags whose CLASS attribute is popup */
a[class ="popup"] {
	padding-left: 18px;
    background: transparent url(popup.gif) no-repeat center left;
}


a[href$='.doc'] { 
	padding-left: 18px;
	background: transparent url(doc.gif) no-repeat center left;
}
a[href$='.xls'] { 
	padding-left: 18px;
	background: transparent url(xls.gif) no-repeat center left;
}
a[rel ~='external'] {
	padding-left: 18px;
	background: transparent url(external.gif) no-repeat center left;
}
</style>
</head>
<body>
<p><a href="mailto:x@x.com">email</a></p>
<p><a class="popup" href="#">pop up</a></p>
<p><a href="test.doc">word</a> </p>
<p><a href="test.xls">excel</a></p>
<p><a rel="external" href="http://www.test.com">website</a></p>
<p><a href="test.pdf">pdf</a></p>
<p><a rel="pdf" href="test">pdf2</a></p>
<p><a rel="xxpdfxx" href="test">pdf3</a></p>



</body>
</html>

Tags: