Skip to content

[css-scoping] Expose counter values for use as variable values #12248

@jp-crane

Description

@jp-crane

What is the problem?
Currently, CSS counters can only be accessed via the content property and related counter functions. It is not possible to use the value of a counter in other CSS properties (e.g., as a number in calc(), or assign it to a custom property for use elsewhere).

Why is this useful?
This would allow for more powerful, context-aware styling in trees, outlines, and other structured content, such as indenting, coloring, or sizing based on counter values.

Proposed solution:
Expose CSS counter values as variables or allow their use in property value calculations (e.g., margin-left: calc(counter(depth) * 1em); or --depth: counter(depth);).

References:
CSS Counters Module Level 3
CSS Variables

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions