Pseudo después de alinear a la derecha

Question

Estoy intentando utilizar el seudo CSS 3: después de los elementos li. El problema es que el contenido de: after está siguiendo inmediatamente el contenido de li, como si: after uses text-align: left; Pero como mis elementos li usan display: block; no debería usar text-align: right; encendido: después de mover el: ¿después del contenido todo el camino hacia la derecha? No lo hace de todos modos.

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

Esta es una captura de pantalla de la cuestión:

Quiero que el> a ser todo el camino a la derecha, y puesto que el contenido de los cambios li, puedo' t establece un ancho en: después del contenido.

¿Cómo voy a conseguir el: después del contenido para alinear a la derecha, si no con text-align?

Answer 1

Try flotador

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

demostración http://jsfiddle.net/surN2/

Answer 2

Hey ahora puedes utilizado position propiedades como la siguiente:

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

y cambiar a las propiedades CSS según su diseño.

Demostración en directo: http://tinkerbin.com/yXzOyDNg

Si desea alinear a la derecha que el cambio en leftright

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

Demostración en directo: http://tinkerbin.com/rSWKxLwX

Answer 3

Uso float:right y especial line-height para la alineación vertical.

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