Pseudo dopo l'allineamento a destra

Question

Sto provando a utilizzare lo pseudo CSS3: dopo su li elementi. Il problema è che il contenuto di: after segue immediatamente il contenuto di li - come se: dopo utilizza text-align: left; Ma dal momento che i miei elementi li usano display: block; non dovrebbe usare l'allineamento del testo: giusto; on: dopo spostare il: dopo il contenuto completamente a destra? Non lo fa comunque.

.container ul li { 
    display: block; 
    border-bottom: 1px solid rgb(60,60,60); 
    border-top: 1px solid rgb(255,255,255); 
    padding: 5px 5px 5px 30px; 
    font-size: 12px; 
} 

.container ul li:after { 
    content: ">"; 
    text-align: right; 
} 

Questa è una schermata del problema:

Voglio che il> di essere fino in fondo a destra, e dal momento che il contenuto delle modifiche li, posso' t imposta una larghezza sul: dopo il contenuto.

Come ottengo il: dopo il contenuto di allineare a destra, se non con allineamento del testo?

Answer 1

Prova galleggiante

.container ul li:after { 
    content: ">"; 
    text-align: right; 
    float:right 
} 

Demo http://jsfiddle.net/surN2/

Answer 2

Hey ora è possibile utilizzare position proprietà come in questo modo:

.container ul li { 
    display: block; 
    border-bottom: 1px solid rgb(60,60,60); 
    border-top: 1px solid rgb(255,255,255); 
    padding: 5px 5px 5px 30px; 
    font-size: 12px; 
    position:relative; 
} 

.container ul li:after { 
    content: ">"; 
    position:absolute; 
    left:20px; 
    top:5px; 
} 

e cambiare le proprietà CSS secondo il vostro disegno.

Demo online: http://tinkerbin.com/yXzOyDNg

Se si desidera allineare destra di cambiamento left in right

.container ul li { 
    display: block; 
    border-bottom: 1px solid rgb(60,60,60); 
    border-top: 1px solid rgb(255,255,255); 
    padding: 5px 5px 5px 30px; 
    font-size: 12px; 
} 

.container ul li:after { 
    content: ">"; 
    position:absolute; 
    right:20px; 
    top:5px; 
} 

Demo online: http://tinkerbin.com/rSWKxLwX

Answer 3

Usa float:right e speciale line-height per l'allineamento verticale.

.container ul li { 
    display: block; 
    border-bottom: 1px solid rgb(60,60,60); 
    border-top: 1px solid rgb(255,255,255); 
    padding: 5px 5px 5px 30px; 
    font-size: 12px; 
    width: 100%; 
} 

.container ul li:after { 
    content: ">"; 
    float: right; 
    line-height: 12px; 
}