Cómo escribir: condición de desplazamiento para a: before y a: after?

Respuestas:

488

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

Si simplemente desea aplicar estilos a un :beforepseudo-elemento cuando el aelemento coincide con una pseudo-clase, debe escribir a:hover:beforeo en su a:visited:beforelugar. Observe que el pseudo-elemento viene después de la pseudo-clase (y, de hecho, al final de todo el selector). Observe también que son dos cosas diferentes; llamarlos a ambos "pseudo-selectores" te va a confundir una vez que te encuentres con problemas de sintaxis como este.

Si está escribiendo CSS3, puede denotar un pseudo-elemento con dos puntos dobles para aclarar esta distinción. Por lo tanto, a:hover::beforey a:visited::before. Pero si está desarrollando para navegadores heredados como IE8 y versiones anteriores, entonces puede salirse con la suya utilizando 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 clase, selector de ID o pseudo-clase.

Una pseudoclase es un simple selector. Sin embargo, un pseudo-elemento no lo es, a pesar de que se asemeja a un simple selector.

Sin embargo, para pseudo-clases de acción del usuario como :hover1 , si necesita que este efecto se aplique solo cuando el usuario interactúa con el pseudo-elemento en sí pero no con el aelemento, entonces esto no es posible sino a través de una solución alternativa oscura dependiente del diseño . Como implica el texto, los pseudo-elementos CSS estándar no pueden tener pseudo-clases actualmente. En ese caso, deberá aplicar :hovera un elemento secundario real en lugar de un pseudo-elemento.

1 Por supuesto, esto no se aplica a las pseudo-clases de enlaces :visitedcomo en la pregunta, ya que los pseudo-elementos no son enlaces.

BoltClock
fuente
27
Cabe señalar que eso coloca el cursor sobre el elemento padre, lo que hace que la decoración se aplique incluso si el pseudoelemento :: after no está debajo del mouse, siempre que su padre lo esté.
SamGoody
66
También se debe tener en cuenta que hay una serie de cosas que no responden a esto debido a la forma en que se especifican las reglas de diseño, por ejemplo text-decoration.
Chris Krycho
1
@ Chris Krycho: De hecho, en realidad tengo una explicación para este problema específico con respecto a los pseudoelementos aquí . Por supuesto, vale la pena aclarar que el problema en sí no tiene conexión con los selectores de pseudo-clase / pseudo-elemento , pero es, como usted señala, un problema de diseño.
BoltClock
@BoltClock Voté esa respuesta muy poco después de dejar este comentario. Huzzah
Chris Krycho
2
Sinlge dos puntos (:) designa pseudo-clases y dos puntos dobles (: :) designa pseudo-elementos. Entonces debería ser un: hover :: before
mikkelbreum
107

Escribe en a:hover::beforelugar de a::before:hover: ejemplo .

sandeep
fuente
2
@mikkelbreum ¿tienes una referencia para probar eso?
shea
3
@bungeshea: Esa es la sintaxis CSS3. Vea los comentarios debajo de mi respuesta (así como mi edición reciente). Sin embargo, es un poco inexacto llamarlo "la" sintaxis correcta porque se permiten los dos puntos simples y dobles para los pseudoelementos CSS1 / 2. En su lugar, lo llamaría la sintaxis recomendada , porque la única razón para seguir usando la sintaxis heredada hoy en día es para admitir IE8 y versiones anteriores.
BoltClock
@mikkelbreum @sheabunge más información sobre CSS2 :aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (single :tiene mejor soporte)
travis
no funciona para subrayar :( jsfiddle.net/porzechowski/u5dhthvq Agregue también mostrar: bloque en línea; jsfiddle.net/porzechowski/u89fo4oq
plusz
7

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

Ejemplo de jsfiddle

html:

<a align="center" href="#"><span>kannada</span></a>

css:

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}
Rao
fuente
1
Esta es una respuesta encantadora. De hecho, me inspiró a extender su violín ligeramente al aumentar el tamaño de fuente del texto de extensión a 24px para que coincida con el texto de reemplazo, agregó 3 espacios sin interrupción antes y después del texto de reemplazo para que ocupen el mismo ancho, y a:hover::beforecon estilo text-decoration: underline, lo que hace que el subrayado recoja el color rojo del texto de reemplazo.
Dave Land
4

Intenta usarlo .card-listing:hover::after hovery afterusarlo ::funcionará

subindas pm
fuente
1

La respuesta de BoltClock es correcta. Lo único que quiero agregar es que si solo desea seleccionar el pseudo elemento, ponga un intervalo.

Por ejemplo: 

<li><span data-icon='u'></span> List Element </li>

en vez de:

<li> data-icon='u' List Element</li>

De esta manera puedes simplemente decir

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

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

bbrinx
fuente
-2

También puede restringir su acción a una sola clase usando el corchete puntiagudo derecho (">"), como lo hice en este código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
    font-size:12px;
    }
    a {
        color:green;
    }
    .test1>a:hover span {
        display:none;
    }
    .test1>a:hover:before {
        color:red;
        content:"Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

Nota: El elemento emergente: before switch solo funciona en la clase .test1

Stefan Gruenwald
fuente