Truc CSS #2 – iconiser vos hyperliens

Le problème des hyperliens, c’est qu’on ne sait pas toujours vers quel type de document on est dirigé. Une petite technique CSS permet d’ajouter de l’information à vos liens en y attachant automatiquement une icone représentant le type de document.

L’idée est assez simple, si un hyperlien pointe vers un .pdf, la CSS va afficher une icone .pdf juste après le lien.

Un exemple:

a[href $='.pdf'] { 
   padding-right: 18px;
   background: transparent url(icon_pdf.gif) no-repeat center right;
}

Vous pouvez retrouver quelques exemples sur Iconize Textlinks with CSS

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s


%d blogueurs aiment cette page :