css - 如何设置格式为“数字：1、2、3、4、5”的表单样式？

Question

<ul>
    <li>number</li> 
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

和样式表：

ul {
    list-style-type: none
}

ul li {
    float: left;
}

li:after {
    content: ", "
}

li:before {
    content: ": "
}

li:last-child:after {
    content: "."
}

li:first-child:before {
    content: ""
}

结果是：

number, 1, 2, 3, 4, 5.

如何解决此结果：

number: 1, 2, 3, 4, 5.

Answer 1

添加这个：

li:first-child:after {
    content: ": "
}

Answer 2

尝试使用 li:first-child:after {content: ": "}too add : after number line And li:not(:first-child):after {content: ", "}too add , after any other line

完整的解决方案

ul {list-style-type: none}
ul li {float: left;}
li:not(:first-child):after {content: ", "}
li:last-child:after {content: "."}
li:first-child:after {content: ": "}

您可以查看 dabblet 要点：http ://dabblet.com/gist/4681763