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?
Temas Relacionados
CSS: Cómo incluir CSS en HTML
Tutorial | 0 Comentarios
CSS: ¿Por qué DarkGray es más luminoso que Gray?
Información | 0 Comentarios
MySQL: Saltos de Línea en MySQL
Consejo | 0 Comentarios
Script Batch: Apagar Computadora Windows
Tutorial | 2 Comentarios
HTML/CSS: Alinear Columna de una Tabla completa derecha o centrada
Pregunta | 3 Respuestas
CSS: "align:center" y "align:right" no funcionan
Pregunta | 1 Respuesta
Poner Windows via Script en Hibernación o Modo de Suspensión
Tutorial | 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.
Al combinar :hover y :before (o :hover y :after), se trata de la orden - primero :hover, luego :before y :after.
Asi es como funciona:
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
...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
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