Align bullet points to the right instead of left

Question

I have bullet points that are aligned right and I would like the bullet points to appear on the right instead of left.

I'm using bullet points because I will replace the bullet with an arrow the points to a URL and use it for navigation.

How do I do this?

This is the code that i'm using for the navigation in the header:

.header right {
padding-top: 8px;
float: right;
text-align: right;
}
.header right ul
{
margin:0;
padding:0;
}
.header right a
{
display:block;
color: black;
text-decoration: none;
}

and the html

<right>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Jewel Thieves</a></li>
<li><a href="">Community</a></li>
</ul>
</right>

If I use direction rtl, the bullets dissapeared.

Answer 1

Setting direction: rtl on the list element would put the bullets on the right, but this is fragile, since the setting also sets the overall writing direction. This means that e.g. “foo (bar)” will be displayed as “(foo (bar”, as per the Unicode bidirectional algorithm.

To deal with this, you need to set the direction to left-to-right inside the list items. In the special case that you might have here, each li contains just an a element and nothing more. Then the following would work:

<style>
ul { direction: rtl; }
ul li a { direction: ltr; unicode-bidi: embed; }
</style>

However, this is probably too tricky. It is better to append the list markers (bullets, arrows, whatever) as characters or as images, possibly with CSS, to the list items and omit browser-generated list markers. The details depend on the specifics and context of the original problem.

Answer 2

try this

DEMO

MARK UP:

<div dir="rtl">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Jewel Thieves</a></li>
<li><a href="#contact">Community</a></li>
</ul>
</div>