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

Question

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!

Answer 1

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>