如此处所定义：
http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
您可以使用以下代码来增加伪元素中的数字。
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
}
H1 {
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
有没有办法可以使用相同的代码增加“a”，“b”，“c”等字母？
谢谢！
答案 0 :(得分：67)
是的，counter()的第二个参数定义了所使用的计数器类型，与常规list-style-type或ul中的ol相同;例如：
content: counter(chapter, lower-alpha);
ul {
counter-reset: listStyle;
}
ul li {
margin-left: 1em;
counter-increment: listStyle;
}
ul li::before {
margin-right: 1em;
content: counter(listStyle, lower-alpha);
}<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
其他包括：decimal，decimal-leading-zero，lower-roman，upper-roman，lower-greek，lower-latin，upper-latin，{{ 1}}，armenian，georgian，lower-alpha。
由于上面的样式列表似乎有一些更新，我选择添加一个代码片段，允许用户从（当前）可用选项以及“输出”区域中进行选择，展示如何使用CSS generated-content：
来使用该样式
upper-alphalet select = document.querySelector('select'),
output = document.querySelector('#currentCounter'),
changeEvent = new Event('change');
select.addEventListener('change', function() {
document.body.style.setProperty('--listStyleType', this.value);
output.textContent = this.value;
});
select.dispatchEvent(changeEvent);body {
--listStyleType: decimal;
}
ul {
counter-reset: listStyle;
columns: 2;
margin-top: 0.5em;
list-style-type: none;
}
ul li {
counter-increment: listStyle;
}
ul li::before {
content: counter(listStyle, var(--listStyleType));
display: inline-block;
margin-right: 0.5em;
width: 1.5em;
height: 1.5em;
line-height: 2em;
text-align: center;
}
code {
display: block;
white-space: pre-wrap;
width: 80%;
box-sizing: border-box;
margin: 1em auto;
padding: 0.5em;
box-shadow: 0 0 0 3px limegreen;
}
code::after {
content: '\A';
}
#currentCounter {
color: #f90;
}
目前可用（截至2017-02-27）：
参考文献：
list-style-type。