Souligner les liens de pointillés

Les hyperliens sont traditionnellement signalés par le soulignement. Mais les soulignés pleins sont trop voyants : si la page présente de nombreux liens, on ne voit plus qu’eux. C’est pourquoi on préfère souvent désactiver le soulignement, en particulier dans les listes et menus de navigation.

Plus discret, et tout aussi efficace, est le soulignement pointillé que vous avez certainement remarqué sur certains sites. Mais comment le réaliser ?

À première vue ça semble simple

Ces deux lignes de CSS remplaceront le soulignement plein caractéristique des hyperliens, par un élégant soulignement en pointillé :

a { text-decoration: none; border-bottom: 1px dotted; }
a:focus, a:hover, a:active { border-bottom-style: solid; }

En fait, ce n’est pas un soulignement, mais une bordure inférieure pointillée. Le CSS2 ne laisse guère de choix : on n’y dispose que de traits pleins (avec text-decoration). Les bordures permettent davantage de fantaisie. Remarquez que, pour qu’elle soit assortie à celle du texte qu’elle souligne, on ne spécifie de couleur. Bien entendu, il faut désactiver totalement le soulignement (text-decoration: none;) puisque, par défaut, un lien est souligné.

Mais ça se complique...

Si on en reste là, on se retrouve avec des bordures pointillées un peu partout y compris là où on ne les attendait pas. Cet habillage des hyperliens est en particulier gênant dès lors que ceux-ci s’appliquent à des images.
Pour obtenir un soulignement pointillé seulement sur les liens textuels, il faut surcharger via CSS à grand renfort de border-bottom: none; afin de supprimer les pointillés disgracieux qui soulignent maintenant les éléments graphiques. Ce n’est pas le cas avec la propriété text-decoration qui a l’intelligence de n’affecter que les textes.

Rappelons aussi que la valeur dotted n’est pas comprise par IE qui affiche des tirets au lieu des pointillés attendus. Pour palier à cette déficience du navigateur, on utilise une image de fond simulant des pointillés (cf. : Des bordures pointillées même sous IE !). Là, ça commence à faire lourd : ce qui semblait si simple ressemble de plus en plus à un char d’assaut pour écraser une mouche.

L’idéal serait de disposer de text-decoration: dotted; qui ne s’appliquerait qu’aux hyperliens textuels...

À réserver aux sigles et abréviations

En attendant, mieux vaut finalement réserver cet effet aux sigles et abréviations, que le soulignement en pointillé caractérise si bien.

abbr,acronym { border-bottom: 1px dotted; cursor: help; }