# counter-increment

> Applies `counter-increment` to the element's CSS counter, named by the bare counter identifier `name`.

```ts
import { counterIncrement } from "@sdxc/u/general";
```

Applies `counter-increment` to the element's CSS counter, named by the
bare counter identifier `name`. `value` is the integer the counter is
incremented by; omit it to fall back to CSS's own default of `1`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.counterIncrement("section")` | `css({ counterIncrement: "section" })` |
| `u.counterIncrement("section", 2)` | `css({ counterIncrement: "section 2" })` |

## Examples

### Basic example

Use `counterIncrement(name)` on each element that should count, then print the counter with `counter(name)` in a pseudo-element:

```tsx
<section mix={[counterReset("chapter"), ...]}>
	<h3
		mix={[
			counterIncrement("chapter"),
			text("lg"),
			weight("semibold"),
			before([pseudoContent('"Chapter " counter(chapter) " · "'), fg("neutral.muted")]),
		]}
	>
		The lighthouse keeper
	</h3>
	<h3
		mix={[
			counterIncrement("chapter"),
			text("lg"),
			weight("semibold"),
			before([pseudoContent('"Chapter " counter(chapter) " · "'), fg("neutral.muted")]),
		]}
	>
		A storm in October
	</h3>
	<h3
		mix={[
			counterIncrement("chapter"),
			text("lg"),
			weight("semibold"),
			before([pseudoContent('"Chapter " counter(chapter) " · "'), fg("neutral.muted")]),
		]}
	>
		What the tide left
	</h3>
</section>
```

### Counting by a step

Pass a second argument to step by more than one, like `counterIncrement("line", 10)`:

```tsx
<div mix={[counterReset("line"), font("mono"), ...]}>
	<p
		mix={[
			counterIncrement("line", 10),
			before([pseudoContent('counter(line) "  "'), fg("neutral.muted")]),
		]}
	>
		PRINT "WHAT IS YOUR NAME?"
	</p>
	<p
		mix={[
			counterIncrement("line", 10),
			before([pseudoContent('counter(line) "  "'), fg("neutral.muted")]),
		]}
	>
		INPUT N$
	</p>
	<p
		mix={[
			counterIncrement("line", 10),
			before([pseudoContent('counter(line) "  "'), fg("neutral.muted")]),
		]}
	>
		PRINT "HELLO, "; N$
	</p>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.counterIncrement("section"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.counterIncrement("section"))
```

## Signature

```ts
u.counterIncrement(name: string, value?: number)
```