Comment supprimer uniquement le soulignement de a:before?

Question

J'ai un ensemble de liens stylisés utilisant le :before pour appliquer une flèche.

Cela fonctionne bien dans tous les navigateurs, mais lorsque je applique le soulignement au lien, je ne veux pas avoir de soulignement sur la partie :before (la flèche).

Voir jsfiddle pour un exemple : http://jsfiddle.net/r42e5/1/

Est-il possible de supprimer cela ? Le style de test que j'ai défini avec #test p a:hover:before est bien appliqué (selon Firebug), mais le soulignement est toujours là.

Un moyen d'éviter cela ?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: " ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

  Un lien
  Un autre lien

Answer 1

Est-il possible de supprimer ceci ?

Oui, si vous modifiez le style d'affichage de l'élément en ligne de display:inline (par défaut) à display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Cela est dû au fait que les spécifications CSS disent :

Quand il est spécifié sur un élément en ligne ou propagé à celui-ci, il affecte toutes les boîtes générées par cet élément, et est ensuite propagé à tout le contenu dynamique de niveau bloc en flux qui partage l'élément en ligne (voir section 9.2.1.1). [...] Pour tous les autres éléments, il est propagé à tous les enfants en flux. Remarquez que les décorations de texte ne sont pas propagées aux descendants flottants et positionnés absolus, ni aux contenus des descendants de niveau inline atomiques tels que les blocs en ligne et les tableaux en ligne.

(Emphase ajoutée.)

Démo : http://jsfiddle.net/r42e5/10/

_{<em>Merci à @Oriol pour avoir proposé la solution de contournement qui m'a incité à vérifier les spécifications et voir que la astuce est légale.</em>}

Answer 2

Il y a un bug dans IE8-11, donc utiliser display:inline-block; seul ne fonctionnera pas là-bas.

J'ai trouvé une solution pour ce bug, en définissant explicitement text-decoration:underline; pour le contenu :before et en écrasant ensuite cette règle à nouveau avec text-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

Exemple de travail ici: http://jsfiddle.net/95C2M/

Mise à jour: Puisque jsfiddle ne fonctionne plus avec IE8, il suffit de coller ce code de démonstration simple dans un fichier html local et de l'ouvrir dans IE8:

    démonstration

        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}

    Lien de test Sans soulignement au survol sous le contenu avant

Answer 3

Vous pouvez le faire en ajoutant ce qui suit à l'élément :before :

display: inline-block;
white-space: pre-wrap;

Avec display: inline-block, le soulignement disparaît. Mais alors le problème est que l'espace après le triangle s'effondre et n'est pas affiché. Pour corriger cela, vous pouvez utiliser white-space: pre-wrap ou white-space: pre.

Démo : http://jsfiddle.net/r42e5/9/

Answer 4

Enveloppez vos liens dans des span et ajoutez le texte-decoration au span sur le a:hover comme ceci,

a:hover span {
   text-decoration:underline;
}

J'ai mis à jour votre fiddle pour ce que je pense que vous essayez de faire. http://jsfiddle.net/r42e5/4/

Answer 5

Essaie d'utiliser à la place :

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

Est-ce que cela fonctionnera ?