将背景色添加到列表项的项目符号

Question

我有一个有序列表（a，b，c ...），并希望将实际项目符号（a，b，c ...）的背景色设置为其他颜色。 我该如何定型？ list-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;
}

这是一个小提琴： http : //jsfiddle.net/2ZsQY/

Answer 2

http://jsfiddle.net/Ue6nu/2/

即使不支持：before，也会保留默认的低级字母。

ul {font: 0.85em Arial;margin:0;}
li {
    list-style-position: outside;
    list-style-type: lower-alpha;
    position:relative;
}
li:first-child {
    counter-reset:index;
}
li:before {
    content: counter(index, lower-alpha) '.';
    counter-increment:index;
    background: #fff;
    position:absolute;
    left:-1.3em;
    z-index:10;
    display:inline-block;
    width:1em;
    color: red;
    font-size: inherit;
    font-weight:bold;
}

Answer 3

您可以使用第n个子选择器和伪元素为它们设置样式。

ul li:before {  
    content: "• ";
    background-color: red;
}

小提琴演示