How to place bullets of ul tag after the text (right side) of each li

Preview Demo

Download 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

Download Demo


Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.