Back to the index.

The @counter-style rule allows you to define your own counter styles.


The test succeeds if there’s a ppk instead of a bullet in front of each list item.


This is the test counter I use:

@counter-style test {
	system: cyclic;
	symbols: "ppk";
	suffix: ".";

Funnily enough the specification doesn’t include the way of actually applying your counter styles to an element. I assume it’s equivalent to other @-rules, with the rule’s identifier being used in the proper declaration on the element. So I assume the following is correct, but I’m not sure:

ul.test {
	list-style-type: test;