Comment supprimer uniquement le soulignement d'un: avant?

95

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

Cela semble bon dans tous les navigateurs, mais lorsque j'applique le soulignement au lien, je ne veux pas avoir de soulignement sur la :beforepartie (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:beforeest 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;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

Développer l'extrait

— OptimusCrime
source

Eh bien, vous voulez évidemment une liste ... Utilisez un élément UL au lieu de la combinaison DIV / P. Avec des listes, vous obtenez les balles (ou disques, ...) gratuitement ...

— Šime Vidas

Pourquoi ne pas utiliser la liste avec des puces personnalisées au lieu de paragraphes dans votre cas? Sinon, appliquez avant-contenu au parent p, pas pour se lier.

— YuS

Copie possible de stackoverflow.com/questions/8536015/…

— Oriol

171

Est-il possible de supprimer cela?

Oui, si vous modifiez le style d'affichage de l'élément en ligne de display:inline(valeur 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é sur 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é à tous les boîtes de niveau bloc en flux qui divisent l'inline (voir la section 9.2.1.1). […] Pour tous les autres éléments, il est propagé à tous les enfants en flux. Notez que les décorations de texte ne sont pas propagées aux descendants flottants et positionnés de manière absolue, ni au contenu des descendants atomiques de niveau en ligne tels que les blocs en ligne et les tables en ligne .

(Soulignez le mien.)

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.}

— Phrogz
source

2

Vous pouvez remplacer un text-decoration:underlineélément appliqué à un élément parent avec display:inline-block. Voir un exemple: jsfiddle.net/aZdhN/1 . Ensuite, le problème du demandeur peut être résolu comme ceci: stackoverflow.com/a/17347068/1529630

— Oriol

3

Autant que je puisse voir, cela ne fonctionne pas dans Internet Explorer (testé 8-10). Des idées sur la façon de traiter IE?

— Linus Caldwell

J'ai trouvé une solution qui fonctionne également dans IE8-11: stackoverflow.com/a/21902566/1607968

— LeJared

53

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

J'ai trouvé une solution pour ce bogue, en définissant explicitement text-decoration:underline;pour le: before-content, puis en écrasant à nouveau cette règle avectext-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, collez simplement ce simple code de démonstration 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>

— LeJared
source

Si un cas était IE8, le soulignement d'une image hypertexte ne pouvait être désactivé que par l' <img style="text-decoration:underline">intérieur (et voici la clé)<a style="padding:0; border:none;">

— Bob Stein

Malheureusement, jsfiddle ne peut pas être vérifié dans IE8 car jsfiddle ne fonctionne pas dans IE8.

— user2867288

Malheureusement, je n'ai trouvé aucun outil de partage de code en ligne qui fonctionne toujours avec IE8. J'ai ajouté un code extrait à la réponse ci-dessus que vous pouvez simplement coller dans un fichier html et l'ouvrir localement dans IE8.

— LeJared

Testé et approuvé sur IE9, événement sans deux états différents.

— saeraphin le

Il y avait un lien avec une icône dans: auparavant, cela ne devait PAS être souligné au repos, puis souligné au survol, mais pas l'icône. Voici ce que j'ai dû faire pour convaincre IE de bien faire les choses: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (oui vraiment, d'abord souligner, puis écraser par aucun) a: hover {text-decration: underline} a: hover: before {text-decoration: none}

— Fake Haak

7

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

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

Avec display: inline-blockle soulignement disparaît. Mais alors le problème est que l'espace après l'effondrement du triangle n'est pas affiché. Pour résoudre ce problème, vous pouvez utiliser white-space: pre-wrapou white-space: pre.

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

— Oriol
source

1

+1 pour l' pre-wrapindice. J'utilisais content:'►\a0'(\ a0 = & nbsp;)

— Hashbrown

1

Enveloppez vos liens dans des étendues et ajoutez la décoration de texte à l'étendue sur le a: hover 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/

— Mamelles
source

Bonne idée. C'était comme ça que je faisais avant. Le problème est que ce lien est produit dans un système cms et que nos clients le remplissent eux-mêmes en tant que texte enrichi.

— OptimusCrime

quelle langue est le CMS? Pourrait le faire cracher le lien, puis l'envelopper dans un intervalle avant de l'envoyer au navigateur?

— Pis du

L'entreprise utilise modx. Je suppose que je pourrais le faire comme une dernière solution, mais je voulais vraiment annuler cela. Je suppose que ce n'est pas possible. Merci quand même.

— OptimusCrime

-1

essayez d'utiliser à la place:

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

cela fera-t-il?

— Elen
source

J'ai peut-être des paragraphes dans ma div, donc cela ne fonctionnera pas. Bonne idée tho.

— OptimusCrime

intéressant qui met -1 si la réponse acceptée suggère la même chose mais sous une forme différente ...

— Elen

-4

utilisez ceci

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

}

— Bipin Chandra Tripathi
source

ne fait rien. la décoration de texte est ignorée.

— OptimusCrime