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/