css: dopo il contenuto non ha sottolineato

Question

Per separare i collegamenti nella navigazione ho impostato il seguente

#menu-main li a:after{ 
    content: " * "; 
} 

La voce corrente ottiene ulteriore

text-decoration: underline; 

il mio problema è questo, che il "*" è ha inoltre sottolineato, ma non dovrei

ho cercato di aggiungere

#menu-main li a:after{ 
    text-decoration: none !important; 
} 

ma non ha effetto

Qualcuno ha un'idea su come mantenere il testo sottolineato ma non il: dopo il contenuto?

Answer 1

Nel flusso normale, lo pseudo elemento espande le dimensioni dell'elemento e ciò che si vede è la sottolineatura della sottolineatura del collegamento stesso. Aggiungi a:after {text-decoration: line-through;} per verificare.

Ecco una soluzione proposta: http://jsfiddle.net/Ronny/Smr38/

Fondamentalmente, quando si utilizza position: absolute per gli pseudo-elementi che influenzano più le dimensioni dei loro elementi principali, così le sottolineature sono tagliati al posto giusto. Hai ancora bisogno di occuparti di cose come gli eventi del puntatore, lo stato al passaggio del mouse e gli anelli di messa a fuoco, ma ho lasciato almeno il secondo per te da capire.

Answer 2

se siete in controllo di markup, è possibile inserire un arco nel tuo link

<a href="..."><span>your link</span></a> 

e utilizzare questa css

a { text-decoration: none } 
a span { text-decoration: underline } 

tal modo, il contenuto iniettato nel won :after pseudoelement essere sottolineato

in caso contrario, è possibile applicare lo stile a li:after (se possibile) in modo tale

#menu-main li:after{ 
    content: " * "; 
} 

Answer 3

È una vecchia domanda, ma è quello che trovi usando Google, quindi ho pensato di condividere la mia soluzione quando hai bisogno dello pseudo-elemento per contribuire alla dimensione del "genitore" e il posizionamento assoluto non è un'opzione per qualche motivo:

#menu-main li a:after{ 
    content: " * "; 
    display:inline-block; /* So we can set a width */ 
    width: 0; 
    margin-left: 10px; /* "Size" of the Pseudo-element */ 
} 

Poiché la larghezza è 0, esso non visualizza un text-decoration. Ciò comporta anche meno codice e meno dipendenze tra i tuoi stili rispetto alla risposta accettata.

Answer 4

Nel mio caso non ho nemmeno bisogno della larghezza, funziona semplicemente aggiungendo inline-block.