:hover:avant text-decoration aucun n'a aucun effet?

Que le titre, je vais ajouter des icônes à l'aide de .icon-*. Lors de l'ajout d'une icône à un lien hypertexte:

<a href="#" class="icon-email icon-large">Email me!</a>

Le contenu inséré par content bien montre le texte souligné-décoration sur le vol stationnaire. J'aimerais désactiver le text-decoration seulement pour le contenu avant:

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}
.icon-mail:before {
    content: "";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
    font-size: 48px;
    line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}

J'ai essayé ceci mais ça ne fonctionne pas (la décoration est encore visible):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
    text-decoration: none;
    color: white;
}
  • Vous ne pouvez pas faire cela avec pseudoelements. Vous allez avoir à utiliser de JS.
  • Oui vous ne pouvez pas doubler pseusoelements et pseudoclasses comme ça sans js. Je suggère l'utilisation de javascript pour gérer l' :avant, plutôt que de gérer le :hover. C'est parce que :avant n'est pas supporté par tous les navigateurs. Mais c'est juste mes 2 cents..
  • au moins IE8+, FF10.0.2+, Opera 11.61+, Safari 5.1.2+, Chrome 17 quirksmode.org/css/contents.html
  • Vous pouvez - le pseudo-élément qui doit être le dernier dans le sélecteur.
  • J'ai remarqué quelques fautes de frappe dans la classe et le sélecteur d'attribut, pas qu'ils se rapportent à la question à portée de main. Notamment, votre icon-large sélecteur d'attribut peut être simplement changé de .icon-large:before (mais je suis en supposant que vous avez seulement qu'en tant que classe autonome et non comme un préfixe pour les autres catégories).
InformationsquelleAutor gremo | 2012-07-13