Combinar a: visitado con a: después, o encadenar pseudo-clases con pseudo-elementos

Question

Digamos que quería agregar una forma (como una marca de verificación) al lado de un enlace después de que se ha visitado, en lugar de tenerlo solo a su vez violeta, usando a: after junto con a: visited.

no estoy seguro si debería seleccionar la forma como esto:

a:visited:after { 

o como esto:

a:visited a:after 

o

a:visited :after { 

(también soy un poco difusa sobre cuándo debería o no debería agregar un espacio antes de un pseudo-elemento, o si importa?)

o tal vez algo diferente?

Ahora mismo mi css se parece a esto:

a:visited:after { 
    /* check mark shape */ 
    content:'\00a0'; 
    color: black; 
    position: relative; 
    left:15px; 
    display:inline-block; 
    width: 3px; 
    height: 6px; 
    border: solid black; 
    border-width: 0 2px 2px 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
} 

verificación de código de marca de forma http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/

Gracias por cualquier ayuda.

Answer 1

Se supone que debes usar a:visited:after como lo estás haciendo actualmente. No funciona no debido a un error en su código, sino porque el problema radica en la pseudoclase :visited; no permite el uso de pseudo-elementos debido a privacy concerns.

Así que, básicamente, no podrá aplicar el icono de su marca de verificación únicamente a los enlaces visitados.

En cuanto a esto:

(soy también un poco borrosa en cuando debería o no debería añadir un espacio antes de que un pseudo-elemento, o lo hace siquiera importa?)

sí importa, ya que el espacio representa un combinador descendiente:

1. el selector a:visited a:after representa la pseudo :after elemento de un a que es un descendiente de otro a que es un enlace visitado, que en HTML no tiene mucho sentido.

2. El selector a:visited :after es similar a a:visited a:after, excepto que representa :after de cualquier tipo de descendiente de a:visited.

   Se puede volver a escribir como a:visited *:after. Ver the universal selector en la especificación.

Al omitir el espacio, que está aplicando el pseudo-elemento directamente al elemento representado por el selector antes de que, lo que en su caso es a:visited, no cualquiera de sus descendientes.