Right-align a HTML List With the Bullet on the Right

In the process of developing my new theme, I encountered a bit of a challenge: how can I right-align an unordered list with the bullet on the right using only CSS and HTML, but without using images?

This is the desired effect and is actually a screenshot of the result I was after:

One of the primary requirements I put upon myself for this theme was to make sure it is as quick as possible with as few external images as possible. The idea was to harness the power of the browser and force myself to investigate the possibilities of using CSS and HTML where-ever possible without having to revert to images or javascript, unless absolutely necessary.

The first idea that came to mind was to use the direction property and set the direction to rtl as follows:

#related ul { 
            direction: rtl; 
            text-align: right; 
            }

On the face of it, this seemed to do the trick, the problem comes when you start ending your lists with punctuation, for example:

If you are using a latin character set, you'll notice the punctuation at the end of each item is at the beginning of the line and not at the end. It would appear this is expected due to the fact I use a ltr character set normally and punctuation is deemed direction agnostic so it's moved to the front.

The next solution was to use a background image. This is the most popular method found on Google, but it involves using an image which I didn't want to do.

So I racked my brains a bit further and then I remembered the CSS :after pseudo element and with a little bit of tinkering I came up with the following:

#related { 
            list-style-type: none; 
            text-align: right; 
            }
#related li { 
            content: '  022';   /* This is the numeric representation of • */
            font-size: 1.3em; 
            font-weight: bold; 
            line-height: 1em; 
            vertical-align: middle; 
            }

Note the second stanza in the about above. The content is the important part. Everything else is there just to make the bullet look more pleasing and as close to the default bullet as possible.

This problem posed to be particularly difficult, but with a bit of tinkering I soon worked it out and it seems to work perfectly without the need for a background image (and thus removes one unnecessary HTTP request).