如何制作一个带有子弹的列表？

Question

我有一个这个HTML代码：

<ul>
    <li>Lorem ipusm</li>
    <li>Lorem ipusm</li>
    <li>Lorem ipusm</li>
</ul>

和CSS：

ul {
  list-style: none;
}

ul li:before {
  content: "• ";
  position: relative;ń
  font-size: 40px;
  color: #FF4237;
  top: 7px;
}

DEMO

我希望该列表看起来像这样（右侧的红色子弹）：

DEMO

我一直在寻找解决方案，但无济于事; - （

Answer 1

将您的CSS改为此

ul {
  list-style: none;
}
li {
  direction: rtl;
}
ul li:before {
  content: "•";
  position: relative;
  font-size: 40px;
  color: #FF4237;
  top: 7px;
}

Answer 2

将direction: rtl;与ul

一起使用

ul {
    list-style: none;
    direction: rtl;
}

ul li:before {
    content: "•";
    position: relative;
    font-size: 40px;
    color: #FF4237;
    top: 7px;
    padding-left: 5px;
}

演示：http://jsfiddle.net/robinhuy/0y7h3dxn/1/

Answer 3

只需在CSS中添加以下代码

即可

ul > li {
  color: #ff0000;
}