liveBook · Manning

Counter

As explained in Web Design Playground

A CSS counter is an automatically incremented numeric accumulator used to generate sequential content in generated output.

A CSS counter is a little number keeper for generated content. It can automatically count items so a list gets custom numbers instead of relying on the browser’s usual markers. section 19.20

The basic idea comes in a few small steps:

  • Remove the standard markers from an ordered list with list-style-type: none. section 19.20
  • Use counter-increment to advance the number for each list item. section 19.20
  • Use a pseudo-element such as ol::before to display custom numbers. section 19.20

Make a list count its own way

Start with an ordered list, hide its normal markers, and place generated numbers before the items. This gives you a starting point for styling the numbers as circles, stars, arrows, or another visual design. section 19.20

Counters are useful when numbering is part of the design rather than a fixed browser decoration. Try changing the marker shape or pairing the numbers with a themed list. section 19.20

How Web Design Playground covers it

How deep it goes
Explains the setup through counter-increment, list-style-type, and ol::before, without developing a complete implementation.
Examples
Uses a numbered list and custom markers such as circled bullets, arrows, stars, and triangles.
What it assumes
Assumes basic HTML lists and CSS selectors while demonstrating pseudo-elements for list customization.
What you can do after
Apply via CSS custom numbering to an ordered list and style its generated markers.
How it connects
Connects counters with ordered lists, generated content, pseudo-elements, and CSS selectors.
Cover of Web Design Playground
liveBookmanning.com
Read Web Design Playground on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground. The section links point to the parts of the book it draws on.