Cómo escribir: condición de desplazamiento para a: antes y a: después?

Cómo escribir :hover y :visited condición :visited para a:before ?

Estoy intentando a:before:hover pero no funciona

Esto depende de lo que realmente estás tratando de hacer.

Si simplemente desea aplicar estilos a a :before pseudo-elemento cuando el elemento a coincide con una pseudo-clase, necesita escribir a:hover:before o a:visited:before lugar. Observe que el pseudo-elemento viene después de la pseudo-clase (y de hecho, al final de todo el selector). Note también que son dos cosas diferentes; llamarlos a ambos “pseudo-selectores” te confundirá una vez que te encuentres con problemas de syntax como este.

Si está escribiendo CSS3, puede denotar un pseudo-elemento con dos puntos para hacer esta distinción más clara. Por lo tanto, a:hover::before y a:visited::before . Pero si está desarrollando navegadores heredados como IE8 y anteriores, entonces puede salirse con la suya usando tan solo dos puntos.

Este orden específico de pseudo-clases y pseudo-elementos se establece en la especificación :

Se puede agregar un pseudo-elemento a la última secuencia de selectores simples en un selector.

Una secuencia de selectores simples es una cadena de selectores simples que no están separados por un combinador. Siempre comienza con un selector de tipo o un selector universal. No se permite ningún otro selector de tipo o selector universal en la secuencia.

Un selector simple es un selector de tipo, selector universal, selector de atributos, selector de clases, selector de ID o pseudoclase.

Una pseudo-clase es un selector simple. Sin embargo, un pseudo-elemento no lo es, aunque se asemeja a un simple selector.

Sin embargo, para las pseudo-clases de acción del usuario tales como :hover 1 , si necesita que este efecto se aplique solo cuando el usuario interactúa con el pseudo-elemento pero no con el elemento a, entonces esto no es posible más que a través de un diseño oscuro solución alternativa-dependiente. Tal como lo implica el texto, los pseudo-elementos CSS estándar no pueden tener pseudo-clases actualmente. En ese caso, deberá aplicar :hover sobre un elemento hijo real en lugar de un pseudo-elemento.


1 Por supuesto, esto no se aplica a pseudoclases de enlace tales como :visited como en la pregunta, ya que los pseudo-elementos no son enlaces.

Escriba a:hover::before lugar de a::before:hover : example .

Para cambiar el texto del enlace del menú al pasar el mouse. (Texto diferente del idioma en hover) aquí está el

Ejemplo jsfiddle

html:

 kannada 

css:

 span { font-size:12px; } a { color:green; } a:hover span { display:none; } a:hover:before { color:red; font-size:24px; content:"ಕನ್ನಡ"; } 

Intenta usar .card-listing:hover::after hover y after usar :: it wil work

La respuesta de BoltClock es correcta. Lo único que quiero agregar es que si solo quieres seleccionar el pseudo elemento, pon un lapso.

Por ejemplo:

 
  • List Element
  • en lugar de:

     
  • data-icon='u' List Element
  • De esta manera puedes decir simplemente

     ul [data-icon]:hover::before {color: #f7f7f7;} 

    que solo resaltará el pseudo elemento, no todo el elemento li

    También puede restringir su acción a una sola clase usando el corchete con punta derecha (“>”), como lo he hecho en este código:

         Document        

    Nota: el control deslizante: antes del interruptor funciona solo en la clase .test1