@counter-style

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

Test

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

• First item
• Second item
• Third item
• Fourth item
• Fifth item

Explanation

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;
}