: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).
Vous devez vous connecter pour publier un commentaire.
Comme le
:avant
pseudo-élément est affiché comme un descendant de la boîte de (plus précisément, juste avant le premier enfant du contenu de la boîte) de son élément générateur, elle obéit à les mêmes règles normal descendant des boîtes de faire à l'égard detext-decoration
:Voir ces réponses pour plus de détails:
Il n'y a pas de bonne façon de contourner ce problème... les seules options qui viennent immédiatement à l'esprit sont:
Le texte à la ligne dans son propre
span
élément, puis appliquertext-decoration
pour quespan
, comme indiqué par skip405. L'inconvénient est, bien sûr, très balisage.Utiliser une ligne de bloc image d'arrière-plan au lieu de texte en ligne dans une icône de la police de votre
:before
pseudo-élément (j'ai également corrigé les incohérences avec votre sélecteurs de classe):L'avantage, cela a plus de skip405 la solution est que vous n'avez pas à modifier le code HTML, mais étant donné qu'il utilise SVG vector images d'arrière-plan et
background-size
, il ne fonctionne pas avec IE8.Si vous avez besoin d'IE8 de soutien, alors vous avez à revenir à des images bitmap:
Insert display:inline-block; dans ton css. Quelque chose qui ressemble à celui ci-dessous:
Voici le JS FIDDLE:
http://jsfiddle.net/73p2k/18/
text-decoration:underline;
àa:before
ETtext-decoration:none;
àa:hover:before
. Il semble être un bug. Thx Pinoy2015!Vous pouvez définir la hauteur & overflow:hidden pour :avant d'élément, de texte et de la décoration ne sera pas visible 🙂
Un pseudoelement sélecteur doit être le dernier élément d'une sélection de la chaîne.
Vous pouvez appliquer un style à
element:hover:before
mais pas àelement:before:hover
.Essayé certaines choses en utilisant simplement la
a
étiquette de balisage, mais hélas. Une solution de contournement possible pour vous peut être à l'intérieur envelopper le lien dans un autre élément, unspan
, par exemple. Ainsi, vous pouvez avoir le souligner sur cet élément (au lieu d'un pseudoelement) - qui est parfaitement contrôlé par les css.Un exemple vivant est ici: http://jsfiddle.net/skip405/fQHUH/