Des fois, CSS a l’art de m’amuser. La difficulté n’est pas toujours là où l’on croit.

Je travaille actuellement sur un template monstrueusement compliqué, et au milieu de plein de trucs bien retors, j’ai une chose simple à faire. Faire un lien précédé d’un « > ». Enfin, je dis « simple », à vous de juger.

Le site en question a supprimé le soulignement des liens par défaut et l’active quand on les survole ou quand on a le focus clavier dessus. Rien de bien extraordinaire.

Je me dis qu’un pseudo-élément before suffira. Très logiquement, je fais ainsi :

.arrow-left:before {
  content: '>\a0';
  speak: none;
}

Petit souci, quand on survole le lien, le soulignement apparait en-dessous du « > ». Pas de souci, je me dis que je vais l’annuler. Sauf que cela ne marche pas, la propriété du pseudo-élément est héritée du lien. Sauuuuuuuuuuf…

En cherchant un peu, je trouve une solution dans la spécification CSS 2.1 de text-decoration (oui rien que cela).

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Le soulignement n’est pas propagé si le pseudo-élément est de type inline-block. Soit.

.arrow-left:before {
  content: '>\a0';
  display: inline-block;
  speak: none;
}

Sauvé ! Cela marche partout. Sauuuuuuuuuuf…

Sous Internet Explorer 8… jusqu’au 11 compris. C’est un bug. En continuant de chercher, je trouve une solution bizarre, mais fonctionnelle.

.arrow-left:before {
  content: '>\a0';
  text-decoration: underline; 
  display: inline-block;
  speak: none;
}
/* IE… */
.arrow-left:before,
.arrow-left:focus:before,
.arrow-left:hover:before,
.arrow-left:active:before {
  text-decoration: none;
}

En gros, tout redéfinir explicitement pour ré-écraser le tout après. Là notre ami Internet Explorer ne bronche plus. Voici un pen qui montre le tout.

Qui a dit que CSS était simple ? Hé bien, qu’il/elle sorte. :)