CSS Lists, Counters, and Generated Content

Intermediate

This lesson is the CSS ownership point for list-marker styling, counters, and generated content. It teaches how CSS creates and formats generated pieces of presentation; HTML remains responsible for list semantics and document meaning.

The boundary matters: Images owns image-value construction, Text owns text processing, Writing Modes owns flow-relative direction, and this lesson owns the CSS mechanisms that generate markers, counter values, and pseudo-element content.

List markers are generated presentation

CSS list styling can control whether a list item has a marker and how that marker is represented. The marker is presentation attached to the list item; it does not replace the semantic list structure supplied by HTML.

`list-style-type` selects a marker representation. `list-style-position` controls whether the marker participates inside or outside the principal block formatting area; the exact visual result depends on the surrounding layout.

::marker gives the marker its own styling boundary

The `::marker` pseudo-element targets the generated list marker. Its property set is intentionally restricted by the specification; it is not a general-purpose pseudo-element that can accept every declaration.

Counters represent generated numbering state

CSS counters are named pieces of generated state. `counter-reset` creates or resets a counter, `counter-increment` changes it, and `counter()` or `counters()` turns the current value into generated content.

Counter scope follows the counter rules established by the CSS Lists specification. A nested counter can restart independently while still allowing `counters()` to expose the chain of ancestor values.

counter-set changes an existing counter

`counter-set` changes the value of an existing counter without the reset-and-recreate behavior of `counter-reset`. This distinction matters when nested generated numbering needs to continue from an established state.

Generated content belongs to CSS presentation

The `content` property supplies generated content for supported pseudo-elements and other generated-content contexts. It can generate strings, counters, images, and other supported values. Generated content does not create HTML nodes in the document tree.

Generated content can be useful for decorative labels, numbering, and visual cues. Information that is required for understanding the document should not be made dependent on CSS-generated presentation alone.

Generated images are still image values

A generated image used by `content` remains an image value. This lesson only establishes that `content` can consume an image value; the image and gradient model belongs to the Images lesson.

Generated content follows the surrounding writing environment

Generated strings and counters participate in the surrounding formatting and writing environment. Writing Modes owns how inline and block directions are established; this lesson owns what generated content is inserted into that environment.

Counters and lists solve different problems

A list marker is tied to list-item presentation. A counter is general generated state that can be used outside lists. They can cooperate, but one should not be substituted for the other simply because both can display numbers.

Practical generated-content debugging

When generated content is missing, check the pseudo-element selector, whether the pseudo-element is applicable, whether `content` computes to a generated value, whether a counter exists in the expected scope, and whether another declaration wins in the cascade.

Do not debug generated content by assuming it became an HTML node. Inspect the CSS declaration and the generated box/presentation behavior instead.

What this lesson deliberately does not own

HTML owns list semantics and meaningful document content. Images owns image values and gradients. CSS Text owns white-space, wrapping, line breaking, and transformation. Writing Modes owns direction and flow-relative geometry. Fonts owns font selection. This lesson owns the generated-content and counter mechanisms themselves.

Custom counter styles define how numbers become markers

CSS Counter Styles Level 3 adds `@counter-style`, which defines a named algorithm for turning counter values into marker strings. It belongs with the counter owner because it changes the representation of counters used by `list-style-type`, `counter()`, and `counters()`.

?

Quick review

li? { color: currentColor; font-weight: 700; }

ol.native { list-style-type: decimal; } body { counter-reset: independent; } .counted { ?: independent; } .counted::before { content: "Count " counter(independent) ": "; }

?

?

.note::before { content: "?te: "; font-weight: 700; } .note::after { content: " ✓"; }

?

?

?

?

?

Specification status: the stable CSS Lists and Counters model is complemented by developing features in CSS Lists and Counters Level 3. Developing features are clearly labelled when introduced and are not presented as universally interoperable.