As defined here:
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?
Thank you!
Yes, the second argument to counter() defines the type of counter used, as for the list-style-type from a regular ul or ol; for example:
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>Others include: 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:
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>The currently-available (as of 2017-02-27):
References:
list-style-type.