我正在为这个问题添加我的解决方案。

我不想使用image，验证器会惩罚你在CSS中使用负值，所以我这样做:

ul          { list-style:none; padding:0; margin:0; }

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }

一种方法是使用li:before和content: ""并将其样式化为内联块元素。

下面是一个工作代码片段:

ul { list-style-type: none; /* no default bullets */ } ul li { font-family: Arial; font-size: 18px; } ul li:before { /* the custom styled bullets */ background-color: #14CCBB; border-radius: 50%; content: ""; display: inline-block; margin-right: 10px; margin-bottom: 2px; height: 10px; width: 10px; } <ul> <li>Swollen joints</li> <li>Pain in hands and knees</li> <li>Redness around joints</li> <li>Constant fatigue</li> <li>Morning stiffness in joints</li> <li>High fevers</li> <li>Rheumatoid nodules, which develop around joints</li> </ul>

我建议给LI一个背景图像和左填充。list-style-image属性在跨浏览器环境中很脆弱，没有必要添加一个额外的元素，比如span。所以你的代码最终看起来是这样的:

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}

我正在为这个问题添加我的解决方案。

我不想使用image，验证器会惩罚你在CSS中使用负值，所以我这样做:

ul          { list-style:none; padding:0; margin:0; }

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }

浏览前一段时间，发现这个网站，你尝试过这个替代方案吗?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

听起来很难，但你可以在这里制作自己的PNG图像/图案，然后复制/粘贴你的代码和自定义你的子弹=)仍然优雅?

编辑:

遵循@lea-verou在另一个答案上的想法，并应用外部资源增强的哲学，我得到了另一个解决方案:

在你的头脑中嵌入Webfont图标库的样式表，在这种情况下字体很棒:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

从fontaweesome cheatsheet(或任何其他webfont图标)中获取代码。

例如: fa-angle-right [& # xf105;]

然后用f的最后一部分。后面跟着一个像这样的数字，还有font-family:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

就是这样!现在你也有自定义子弹提示=)

小提琴

最常见的做法是:

ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: "• "; color: red; /* or whatever color you prefer */ } <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

可以在所有浏览器中运行，包括IE 8及以上版本。