css - 数字出现在 RTL 中的内容 CSS 之前

Question

我正在使用以下内容设计自定义无序列表:

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

如果 anchor 以字符开头，它就可以正常工作。但如果我以数字开头，即 200，则子弹会移动。

我该如何解决这个问题？ check the image

HTML代码

<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

试试 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;
}

演示:http://jsfiddle.net/GCu2D/4914/