How to move the list marker point to the right side of the text?

Question

The image of the bullet should be on the right side of the text. Right now, by default it is displayed on the left side of the page. How can i change this?

I have this CSS:

.landingpage ul{
list-style:none;
margin:0 0 1em 15px;
padding: 0;
list-style-position: inside;

}
.landingpage ul li{
line-height:1.3em;
margin: .25em 0;
padding: 0 0 0 15px;
background:url(../images/star.png) no-repeat 0 4px;
  list-style-type: none;
}
.landingpage li ul{
margin:0 0 0 30px;
list-style:disc;
}
 .landingpage li ul li{
padding-right:0;
background:none;
}

/* Holly Hack to fix ie6 li bg */
/* Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */

@media print{
.landingpage ul {
list-style:disc;
margin-right:30px;
}
 .landingpage ul li {
padding-right:0px;
background:none;
}
}

This is my HTML:

<div class="landingpage">
<ul >
<li>מפחד מהמלחמה</li>
</div>

</ul>

Answer 1

The reason you don't have a bullet point is because list-style: none;

Remove list-style: none;from .landingpage uland, if you want, you can add direction: rtl;to make the list appear on the right side of the screen, not the left.

.landingpage ul{
    margin:0 0 1em 15px;
    padding: 0;
    list-style-position: inside;
    /* direction: rtl; */
}

JSFiddle Demo

Answer 2

Try below css

CSS

li{
direction:rtl;
}
ul{
  list-style-position:inside;
}

Demo