CSS 伪元素计数器：你能增加字母“a”、“b”、“c”等而不是数字吗？

CSS Pseudo Element Counters: can you increment an alphabet letter "a", "b", "c", etc instead of a number?

提问by HandiworkNYC.com

As defined here:

如此处定义：

http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

You can use code like the following to increment numbers in pseudo elements.

您可以使用如下代码来增加伪元素中的数字。

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;
}

Is there a way you can use the same code to increment letters like "a", "b", "c", etc?

有没有办法可以使用相同的代码来增加“a”、“b”、“c”等字母？

Thank you!

谢谢！

回答by David says reinstate Monica

Yes, the second argument to counter()defines the type of counter used, as for the list-style-typefrom a regular ulor ol; for example:

是的，第二个参数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>

JS Fiddle demo.

JS小提琴演示。

Others include: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.

其他包括：decimal，decimal-leading-zero，lower-roman，upper-roman，lower-greek，lower-latin，upper-latin，armenian，georgian，lower-alpha，upper-alpha。

As there seems to have been something of an update to the above list of styles, I chose to add a code snippet which allows the user to choose from the (currently-) available options, along with an 'output' area, to show how to use that style with CSS generated-content:

由于似乎对上述样式列表进行了一些更新，因此我选择添加一个代码片段，允许用户从（当前）可用选项以及“输出”区域中进行选择，以显示如何将该样式与 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;
}

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;
}

<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>

<code>
  li::before {
    content: counter(&lt;counterName&gt;, <span id="currentCounter"></span>)
  }
</code>

The currently-available (as of 2017-02-27):

当前可用（截至2017-02-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

• 阿拉伯语-印度语
• 亚美尼亚语
• 孟加拉
• 柬埔寨人
• 圆圈
• cjk-十进制
• cjk-地球分支
• cjk-天干
• 十进制
• 十进制前导零
• 梵文
• 光盘
• 披露关闭
• 公开公开
• 埃塞俄比亚数字
• 格鲁吉亚人
• 古吉拉特语
• 古尔穆基
• 希伯来语
• 平假名
• 平假名色波
• 日本正式
• 日本非正式
• 卡纳达语
• 片假名
• 片假名色波
• 高棉语
• 韩文-正式
• 韩文-汉字-正式
• 韩文-汉字-非正式
• 老挝
• 低阿尔法
• 低阿尔法
• 下亚美尼亚语
• 下希腊语
• 低拉丁
• 低罗马
• 马拉雅拉姆语
• 蒙
• 缅甸
• 奥里亚
• 波斯语
• 简体中文
• 简体中文-非正式
• 正方形
• 泰米尔语
• 泰卢固语
• 泰国
• 藏
• 繁中正式
• 繁中非正式
• 上阿尔法
• 上亚美尼亚人
• 上拉丁语
• 上罗马

References:

参考：

• list-style-type.
• "Generated Content, automatic numbering and lists," from the W3 (now outdated).
• "CSS Counter Styles, Level 3," from the W3.

• list-style-type.
• “生成的内容、自动编号和列表”，来自 W3（现已过时）。
• “ CSS 计数器样式，级别 3”，来自 W3。