web-dev-qa-db-fra.com

Comment supprimer uniquement le soulignement de a: before?

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

Il semble bon dans tous les navigateurs, mais lorsque j'applique le soulignement au lien, je ne veux pas avoir de soulignement sur 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 avec lequel je me suis assis #test p a:hover:before est appliqué (selon Firebug), mais le soulignement est toujours là.

Comment é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;
}
<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>
htmlcsshyperlinkpseudo-elementtext-decorations
88
OptimusCrime

Est-il possible de supprimer cela?

Oui, si vous changez 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;
}

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

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

(Je souligne.)

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

Merci à @Oriol d'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.

155
Phrogz

Il existe un bogue 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: avant-contenu, puis écraser à nouveau cette règle 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: Étant donné que jsfiddle ne fonctionne plus avec IE8, collez simplement ce code de démonstration simple dans un fichier html local et ouvrez-le dans IE8:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        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;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>
52
LeJared

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

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 le corriger, vous pouvez utiliser white-space: pre-wrap ou white-space: pre.

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

7
Oriol

Enveloppez vos liens dans des plages et ajoutez la décoration de texte à la plage sur le a: survolez comme ceci,

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/

1
Udders