CSS伪元素计数器：可以增加字母“ a”，“ b”，“ c”等而不是数字吗？

是的，的第二个参数

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

armenian

georgian

lower-alpha

upper-alpha

由于上面的样式列表似乎有所更新，我选择添加一个代码段，该代码段使用户可以从（当前）可用选项中进行选择，以及一个“输出”区域，以显示如何在CSS生成内容中使用该样式：

let 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;}pre {  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;}pre::after {  content: 'A';}#currentCounter {  color: #f90;}<label for="counterChoice">Please select a CSS counter:</label><select id="counterChoice">  <option value="arabic-indic">arabic-indic</option>  <option value="armenian">armenian</option>  <option value="bengali">bengali</option>  <option value="cambodian">cambodian</option>  <option value="circle">circle</option>  <option value="cjk-decimal">cjk-decimal</option>  <option value="cjk-earthly-branch">cjk-earthly-branch</option>  <option value="cjk-heavenly-stem">cjk-heavenly-stem</option>  <option value="decimal">decimal</option>  <option value="decimal-leading-zero">decimal-leading-zero</option>  <option value="devanagari">devanagari</option>  <option value="disc">disc</option>  <option value="disclosure-closed">disclosure-closed</option>  <option value="disclosure-open">disclosure-open</option>  <option value="ethiopic-numeric">ethiopic-numeric</option>  <option value="georgian">georgian</option>  <option value="gujarati">gujarati</option>  <option value="gurmukhi">gurmukhi</option>  <option value="hebrew">hebrew</option>  <option value="hiragana">hiragana</option>  <option value="hiragana-iroha">hiragana-iroha</option>  <option value="japanese-formal">japanese-formal</option>  <option value="japanese-informal">japanese-informal</option>  <option value="kannada">kannada</option>  <option value="katakana">katakana</option>  <option value="katakana-iroha">katakana-iroha</option>  <option value="khmer">khmer</option>  <option value="korean-hangul-formal">korean-hangul-formal</option>  <option value="korean-hanja-formal">korean-hanja-formal</option>  <option value="korean-hanja-informal">korean-hanja-informal</option>  <option value="lao">lao</option>  <option value="lower-alpha">lower-alpha</option>  <option value="lower-alpha">lower-alpha</option>  <option value="lower-armenian">lower-armenian</option>  <option value="lower-greek">lower-greek</option>  <option value="lower-latin">lower-latin</option>  <option value="lower-roman">lower-roman</option>  <option value="malayalam">malayalam</option>  <option value="mongolian">mongolian</option>  <option value="myanmar">myanmar</option>  <option value="oriya">oriya</option>  <option value="persian">persian</option>  <option value="simp-chinese-formal">simp-chinese-formal</option>  <option value="simp-chinese-informal">simp-chinese-informal</option>  <option value="square">square</option>  <option value="tamil">tamil</option>  <option value="telugu">telugu</option>  <option value="thai">thai</option>  <option value="tibetan">tibetan</option>  <option value="trad-chinese-formal">trad-chinese-formal</option>  <option value="trad-chinese-informal">trad-chinese-informal</option>  <option value="upper-alpha">upper-alpha</option>  <option value="upper-armenian">upper-armenian</option>  <option value="upper-latin">upper-latin</option>  <option value="upper-roman">upper-roman</option></select><ul>  <li>one</li>  <li>two</li>  <li>three</li>  <li>four</li>  <li>five</li>  <li>six</li>  <li>seven</li>  <li>eight</li>  <li>nine</li>  <li>ten</li></ul><pre>  li::before {    content: counter(&lt;counterName&gt;, <span id="currentCounter"></span>)  }</pre>

当前可用（截至2017年2月27日）：

• arabic-indic
• armenian
• bengali
• cambodian
• circle
• cjk-decimal
• cjk-earthly-branch
• cjk-heavenly-stem
• decimal
• decimal-leading-zero
• devanagari
• disc
• disclosure-closed
• disclosure-open
• ethiopic-numeric
• georgian
• gujarati
• gurmukhi
• hebrew
• hiragana
• hiragana-iroha
• japanese-formal
• japanese-informal
• kannada
• katakana
• katakana-iroha
• khmer
• korean-hangul-formal
• korean-hanja-formal
• korean-hanja-informal
• lao
• lower-alpha
• lower-alpha
• lower-armenian
• lower-greek
• lower-latin
• lower-roman
• malayalam
• mongolian
• myanmar
• oriya
• persian
• simp-chinese-formal
• simp-chinese-informal
• square
• tamil
• telugu
• thai
• tibetan
• trad-chinese-formal
• trad-chinese-informal
• upper-alpha
• upper-armenian
• upper-latin
• upper-roman