Preview Demo

A member of our site asked how to place bullets after the text of the li tag. So, here I come with 2 solutions for her requirement.

### Solution 1:

Basically it’s not possible by any CSS property to place the bullets after the text of the <li> tag, but with a simple trick we can make it happen. Actually I tries two things, 1st one is adding the hex code of bullets (The HEX code of bullet is &#x95; and The HEX code of Triangle Bullet is &#x2023) right after the text of the <li> tag. But the problem with that is, you have to position each and every bullet. cause the length of each text will be different.

The most effective way I found is…. 1st remove the bullet decoration. Then place the bullets as a background image and give it a fixed position them in the right side without repetition.

Here is the css code:

#ullist
{
list-style-type: none;
width:100px;
}

#ullist li
{
background-image:url(list-image.png);
background-repeat:no-repeat;
background-position:right;
cursor:pointer;
}


After that just make your simple html.

<ul id="ullist">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>


That’s it. Your bullets will appear in the right side now. Now you also can give hover effects and whatever you want. Just download our demo aand see how it works. Hope it will help you.

### Solution 2:

This is the simplest way to do that. You just have to add two attributes in the html <ul> tag, and it’s done.

Here is the example.

<ul dir="rtl" type="disc">
<li>First</li>
<li>Second</li>
</ul>


As these are HTML attributes, so in the CSS you need not to add the bullet images as background image in the <li> tags like the solution 1. You just have to add the normal css codes for bullets. Just like the following.

ul
{
list-style-type:none;
list-style-image:url('http://www.w3schools.com/css/sqpurple.gif');
}


Preview Demo