22 Votos

CSS: :hover para :before y :after

Pregunta de WebHorn | 23/09/2022 a las 10:15

¿Es de alguna manera posible definir el selector clase pseudo :hover para los elementos pseudo :before y :after?

Concretamente, me gustaría diseñar algunos de mis enlaces con las reglas CSS a:before y a:after. Sin embargo, dependiendo del mouse se mueve sobre el hipervínculo o no, otro contenido debe aparecer en el frente o después del enlace (por lo que la aplicación típica de :hover).

Curiosamente, en mis pruebas, a:before, a:after así como a:hover trabajan solo, mientras que la combinación (a:before:hover y a:after:hover) no funciona. ¿Cómo es posible combinar ambos o este selector CSS no es posible en absoluto?

ResponderPositivoNegativoFechaVotos
2Mejor Respuesta2 Votos

Al combinar :hover y :before (o :hover y :after), se trata de la orden - primero :hover, luego :before y :after.

Asi es como funciona:

a:hover:before
a:hover:after

Entonces, en primer lugar, debe escribir el selector de class pseudo (:hover) y solo después de eso el selector de elementos pseudo (:before). :before así como :after, siempre debe llegar al final.
23/09/2022 a las 20:48

ResponderPositivo Negativo
00 Votos

...lamentablemente, no funciona con una clase al principio:

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

Eso no tiene efecto.
23/10/2022 a las 17:19

Positivo Negativo
22 Votos

Por supuesto que funciona con una clase:

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

Tiene que escribir todo juntos sin los espacios.
23/10/2022 a las 17:57

Positivo Negativo
Responder
Responder

Temas Relacionados

CSS: Cómo incluir CSS en HTML

Tutorial | 0 Comentarios

MySQL: Saltos de Línea en MySQL

Consejo | 0 Comentarios

Aviso Importante

Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.

Participar

Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.