Pseudo after align right

Question

I'm trying to use the CSS3 pseudo :after on li elements. The issue is that the content of :after is immediately following the li content - as if :after uses text-align:left; But since my li elements use display:block; shouldn't using text-align:right; on :after move the :after content all the way to the right? It doesn't anyway.

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

This is a screen shot of the issue:

I want the > to be all the way at the right, and since the content of the li changes, I can't set a width on the :after content.

How would I get the :after content to align to the right, if not with text-align?

Answer 1

Try float :

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

Demo http://jsfiddle.net/surN2/

Answer 2

Hey now you can used position properties as like this:

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

and change to css properties according your design.

Live demo: http://tinkerbin.com/yXzOyDNg

If you want to right align than change left into 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; } 

Live demo: http://tinkerbin.com/rSWKxLwX