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

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

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

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

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

小提琴

我试过了，结果感觉怪怪的。css在本教程的:after {content: "";}部分后停止工作。我发现你可以通过使用color:#ddd;在li项本身上。

举个例子。

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}

我使用jQuery来实现这个:

jQuery('li').wrapInner('<span class="li_content" />');

&与一些CSS:

li { color: red; }
li span.li_content { color: black; }

也许有点过分，但如果你是为CMS编写代码，而你不想让编辑在每个列表项中添加额外的span，这很方便。

一种方法是使用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>

Lea Verou解决方案在多行条目中的完美缩进可能是这样的:

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

li{
    padding-left: 1.5em; 
}

li:before {
    position: absolute;
    content: "•";
    color: red;
    left: 0;
}