css - texto - Pseudo despues alinear a la derecha

centrar texto css vertical

Question

Estoy tratando de usar el pseudo CSS3: after en elementos li. El problema es que el contenido de: after sigue inmediatamente el contenido de li - como si: after utiliza text-align: left; Pero ya que 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 a 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 del problema:

Quiero que el> esté completamente a la derecha, y dado que el contenido de li cambia, no puedo establecer un ancho en el: después del contenido.

¿Cómo obtendría el: después de que el contenido se alinee a la derecha, si no fuera por alineación de texto?

Answer 1

Intenta float :

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

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

Answer 2

Oye, ahora puedes usar propiedades de position así:

.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 css propiedades de acuerdo a su diseño.

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

Si quieres alinear a la derecha que cambiar de left a 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;
}

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

Answer 3

Utilice float:right y line-height de line-height especial para 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;
}