html - 为列表项元素符号添加背景颜色

Question

我有一个有序列表 (a, b, c...)，我想将实际元素符号 (a, b, c...) 的背景颜色设为不同的颜色。我将如何设计它？ list-type 属性似乎只改变元素符号，而不是给它们添加样式。我想维护列表的 type="a"结构，并简单地为每个字母添加背景颜色。

另外...有人可以与我分享如何使子弹居中或将它们冲到一侧吗？目前，他们看起来有点不合时宜。

Answer 1

使用上面@kingkong 的评论，你可以做这样的事情:

ul > li:before {  
    background-color: red;
    margin-right: 5px;
    padding: 0 5px;
    content: counter(index, lower-alpha);
    counter-increment:index;
}
li:first-child {
    counter-reset:index;
}
ul li {
    list-style: none;
}

这是一个 fiddle :http://jsfiddle.net/2ZsQY/