Combina a: visitato con: after, o concatenando pseudo-classi con pseudo-elementi

Question

Diciamo che volevo aggiungere una forma (come un segno di spunta) accanto a un link dopo che è stata visitata, invece di averla appena girata viola, usando a: dopo insieme a: visitato.

sono incerto se devo selezionare la forma in questo modo:

a:visited:after { 

o come questo:

a:visited a:after 

o

a:visited :after { 

(io sono anche un po ' fuzzy on quando dovrei o non dovrei aggiungere uno spazio prima di uno pseudo-elemento, o importa anche?)

o forse qualcosa di diverso?

questo momento il mio css assomiglia a questo:

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); 
} 

controllo codice forma marchio da http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/

Grazie per qualsiasi aiuto.

Answer 1

Si suppone di utilizzare a:visited:after come si sta facendo attualmente. Non funziona non a causa di un errore nel codice, ma perché il problema si trova nella pseudo-classe :visited - non consente l'uso di pseudo-elementi a causa di privacy concerns.

Quindi, in pratica, non sarà possibile applicare l'icona del segno di spunta solo ai collegamenti visitati.

questo proposito:

(io sono anche un po 'confusi su quando dovrebbe o non dovrebbe aggiungere uno spazio prima di una pseudo-elemento, o lo fa anche la materia?)

fa importa, perché lo spazio rappresenta un combinatore discendente:

1. il selettore a:visited a:after rappresenta il :after pseudo elemento di un a che è un discendente di un altro a che è un link visitato, che in HTML non ha molto senso.

2. Il selettore a:visited :after è simile a a:visited a:after, tranne rappresenta :after di qualsiasi tipo di discendente di a:visited.

   Può essere riscritto come a:visited *:after. Vedi the universal selector nella specifica.

Omettendo lo spazio, si sta applicando lo pseudo-elemento direttamente all'elemento rappresentato dal selettore prima di esso, che nel tuo caso è a:visited, non è nessuno dei suoi discendenti.