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 thelist-style-type
from a regularul
orol
; for example:JS Fiddle demo.
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:
The currently-available (as of 2017-02-27):
References:
list-style-type
.