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. :)