Utilizzo: dopo lo pseudo elemento dopo elemento di ancoraggio - differenze del browser

Question

Ho un elemento <a>, dopo di che voglio mostrare un segno >, utilizzando lo pseudo elemento .

contenuto dell'elemento <a> è dinamico, quindi è modificata la larghezza, e talvolta l'evento contenuto estende poche righe (poiché questo elemento <a> è all'interno di un <div> che è larghezza è fissa).

Desidero che la posizione orizzontale dello > inizi alla fine della riga più lunga. Cioè, quando lo do che right:0; regola, dovrebbe essere a destra la maggior parte bordo dell'elemento (la posizione verticale non importa in questo momento):

Questo è il modo in cui si comporta in FF , ma in Chrome e IE, il > appare alla fine della fila più corta:

mi piacerebbe capire che cosa provoca la differenza tra i browser, ma ancora più importante, mi piacerebbe tutto i browser si comportano come FF - posizionando lo :after alla fine della riga più lunga. È possibile?

ho messo su the above code dabblet

Answer 1

Questo perché il vostro elemento a è impostato per visualizzare inline di default, e Firefox gestisce posizionamento all'interno inline elementi in modo leggermente diverso a Chrome e IE.

Per correggere questo sia in Chrome e IE (pur mantenendo l'aspetto di Firefox), semplicemente dare il vostro elemento a un display inline-block:

a { 
    position:relative; 
    display:inline-block; 
} 

Modified Dabblet demo.