Numbers appear before content CSS in RTL

Question

I am Designing a Custom unordered list using the following :

.list-light li a:before {
content: "\f104";
font-family: FontAwesome;
margin-left: 8px;
color: #bcc987;
font-size: 12px;
}

it works just fine if the anchor starts with a character. but if I start it with a number i.e. 200 the bullet shifts.

how can I solve this issue? check the image

the HTML CODE

<ul class="list-light">
<li><a href="/Portal/ND/515">تنفيذ أولى مراحل التحول الرقمي بمراكز استقبال ضيوف الرحمن بالمدينة المنورة</a></li>
<li><a href="/Portal/ND/514">أمير المدينة المنورة يرأس الاجتماع الأول لمجلس هيئة تطوير المنطقة</a></li>
<li><a href="/Portal/ND/513">خادم الحرمين الشريفين يصل إلى نيوم</a></li>
<li><a href="/Portal/ND/511"> أمير منطقة المدينة المنورة يرأس لجنة الحج بالمدينة المنورة</a></li>
<li><a href="/Portal/ND/510">200 ألف سائح يقلهم باص المدينة السياحي في عامه الأول</a></li>

Answer 1

Try float:right

CSS:

.list-light li a:before {
  content: "\f104";
  font-family: FontAwesome;
  margin-left: 8px;
  color: #bcc987;
  font-size: 12px;
  float: right;
}

.list-light {
  direction: rtl;
  list-style: none;
}

Demo: http://jsfiddle.net/GCu2D/4914/