CSS Candy

Examples

CSS Counters

Using CSS Counters

CSS counters number elements automatically, ideal for lists or sections.

What are CSS Counters?

CSS counters are a powerful feature in CSS that allow you to automatically number elements on a webpage. They are particularly useful for creating ordered lists, numbering headings, or any situation where you want to keep track of the number of times an element is used. CSS counters work by using a combination of the counter-reset, counter-increment, and content properties.

Setting Up a CSS Counter

To use a CSS counter, you first need to establish a counter using the counter-reset property. This initializes the counter to a specified value, usually zero. Then, you can use counter-increment to increase the counter for each element, and content to display the counter's value.

Example: Numbering List Items

Below is an example demonstrating how to number list items using CSS counters. This approach can be customized to fit various styling needs by adjusting CSS properties.

In the example above, the li::before selector is used to insert the counter value before each list item, creating a numbered list without using <ol> tags.

Advanced Usage: Nested Counters

CSS counters can also be nested to create hierarchical numbering, which is useful for complex document structures like outlines or multi-level lists.

This advanced example demonstrates how to create a nested counter system with sections and subsections, which can be particularly useful for structuring documents with multiple heading levels.

Examples

Next
Border Images