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