Comment supprimer uniquement le soulignement d’un: avant?

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

Cela a l’air bien dans tous les navigateurs, mais quand j’applique le soulignement sur le lien, je ne veux pas souligner le :before partie (la flèche).

Voir jsfiddle par exemple: http://jsfiddle.net/r42e5/1/

Est-il possible de supprimer cela? Le style de test auquel je me suis assis avec #test pa:hover:before est appliqué (selon Firebug), mais le soulignement est toujours là.

Un moyen d’éviter cela?

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

Est-il possible de supprimer cela?

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

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

C’est parce que les spécifications CSS disent :

Lorsqu’elle est spécifiée ou propagée à un élément en ligne, elle affecte toutes les zones générées par cet élément et est ensuite propagée à toutes les zones au niveau du bloc in-flow qui divisent la ligne (voir la section 9.2.1.1). […] Pour tous les autres éléments, il est propagé aux enfants entrants. Notez que les décorations de texte ne sont pas propagées aux descendants flottants et absolument positionnés, ni au contenu des descendants de niveau inline tels que les blocs en ligne et les tables en ligne .

(Soulignez le mien.)

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

Merci à @Oriol pour avoir fourni la solution de contournement qui m’a incité à vérifier les spécifications et à voir que la solution de contournement est légale.

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

J’ai trouvé une solution à ce bogue en définissant explicitement text-decoration:underline; pour le: before-content et écraser 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 vous suffit de coller ce code de démonstration simple dans un fichier html local et de l’ouvrir dans IE8:

    demo    Testlink With no Underline on hover under before-content   

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 le problème est que l’espace après le sortingangle s’effondre et n’est pas montré. Pour y remédier, vous pouvez utiliser white-space: pre-wrap ou white-space: pre .

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

Enveloppez vos liens dans des travées et ajoutez le texte-décoration à l’envergure du a: hover comme ça,

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

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

essayez d’utiliser plutôt:

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

cela fera-t-il?

utilisez ceci

 #test p:before { color: #B2B2B2; content: "► "; }