您可以使用以下代码来增加伪元素中的数字。
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”等?
谢谢!
是的,的第二个参数counter()定义了使用的计数器的类型,例如list-style-type来自常规ul或的ol;例如:
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。
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; } 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(<counterName>, <span id="currentCounter"></span>) } </code>
当前可用(截至2017年2月27日):