22 Voix

CSS: :hover pour :before et :after

Question de WebHorn | 23/09/2022 à 10:36

Est-il possible de définir le sélecteur classe pseudo :hover pour les pseudo-éléments :before et :after?

Concrètement, je voudrais concevoir certains de mes liens avec les règles CSS a:before et a:after. Cependant, selon la souris se déplace sur l'hyperlien ou non, un autre contenu doit apparaître devant ou après le lien (donc l'application typique de :hover).

Fait intéressant, dans mes tests, a:before, a:after ainsi qu a:hover travaille seul, tandis que la combinaison (a:before:hover et a:after:hover) ne fonctionne pas. Comment est-il possible de combiner les deux ou ce sélecteur CSS n'est-il pas du tout possible?

RépondrePositifNégatifDateVoix
Avatar NetLabel
2Meilleure Réponse2 Voix

Lors de la combinaison de :hover et :before (ou :hover et :after), il s'agit de l'ordre - d'abord :hover, ensuite :before et :after.

C'est comme ça que ça marche:

a:hover:before
a:hover:after

Donc, tout d'abord, vous devez écrire le sélecteur class pseudo (:hover) et seulement après cela le sélecteur d'éléments pseudo (:before). :before ainsi que :after, devrait toujours venir à la fin.
23/09/2022 à 23:35

RépondrePositif Négatif
Avatar Invité
00 Voix

...malheureusement, cela ne fonctionne pas avec une classe au début:

.classe a:hover:after {
  color: #93c21b !important;
}

Cela n'a aucun effet.
23/10/2022 à 18:37

Positif Négatif
Avatar Invité
11 Vote

Bien sûr, cela fonctionne avec une classe:

a.classe:hover:after {
  color: #93c21b !important;
}

Vous devez tout écrire ensemble sans les espaces.
23/10/2022 à 22:46

Positif Négatif
Répondre
Répondre

Sujets Connexes

CSS: Comment inclure CSS dans HTML

Tutoriel | 0 Commentaires

Script Batch: Arrêter Ordinateur Windows

Tutoriel | 3 Commentaires

HTML/CSS: Aligner Colonne de Table entière à droite ou centrée

Question | 3 Réponses

CSS: "align:center" et "align:right" ne fonctionnent pas

Question | 1 Réponse

Tabulateur CSS

Conseil | 0 Commentaires

Validation HTML5: Element "link" is missing required attribute "property"

Question | 1 Réponse

CSS pour <sub> et <sup>

Question | 3 Réponses

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.