CSS counter Auto-numbering summary

Category：CSS

Pub.date：2021-09-27

Automatic numbering with CSS, without the need for JavaScript.

counter basic form

<style>
body {
    counter-reset: num 0;    /* Set num to 0. */
}
div:before {
    counter-increment: num 1;    /* Number of num increases */
    content: counter(num);    /* Display format */
}
</style>
<body>
    <div>abc</div>
    <div>def</div>
    <div>ghi</div>
</body>

Result

1abc
2def
3ghi

Add padding to counter basic form

<style>
body {
    counter-reset: num 0;
}
div:before {
    counter-increment: num 1;
    content: counter(num);
    padding-right: 10px;    /* add */
}
</style>
<body>
    <div>abc</div>
    <div>def</div>
    <div>ghi</div>
</body>

Result(Roughly like this)

1 abc
2 def
3 ghi

For dl dd (I dare you not to use ol or ul)

<style>
dl {
    counter-reset: num 0;
}
dd {
    margin: 0;
}
dd:before {
    counter-increment: num 1;
    content: counter(num);
    padding-right: 10px;
}
</style>
<dl>
    <dd>abc</dd>
    <dd>def</dd>
    <dd>ghi</dd>
</dl>

Result(Roughly like this)

1 abc
2 def
3 ghi

Text before and after the sequential number

<style>
dl {
    counter-reset: num 0;
}
dd {
    margin: 0;
}
dd:before {
    counter-increment: num 1;
    content: "about" counter(num) "gram";    /* Display format */
    padding-right: 10px;
}
</style>
<dl>
    <dd>abc</dd>
    <dd>def</dd>
    <dd>ghi</dd>
</dl>

Result(Roughly like this)

about1gram abc
about2gram def
about3gram ghi

other

<style>
dl {
    counter-reset: num 0;
}
dd {
    margin: 0;
}
dd:before {
    counter-increment: num 1;
    content: "about" counter(num,lower-greek) "gram";
    padding-right: 10px;
}
</style>
<dl>
    <dd>abc</dd>
    <dd>def</dd>
    <dd>ghi</dd>
</dl>

Result(Roughly like this)

aboutαgram abc
aboutβgram def
aboutγgram ghi

variations:
armenian
cjk-ideographic
decimal
decimal-leading-zero
georgian
hebrew
hiragana
hiragana-iroha
katakana
katakana-iroha
lower-alpha
lower-greek
lower-latin
lower-roman
upper-alpha
upper-latin
upper-roman

nesting

<style>
dl {
    counter-reset: num;
}
dd {
    margin: 0 0 0 10px;
}
dd:before {
    content: counters(num, ".") ".";
    counter-increment: num;
    padding-right: 10px;
}
</style>
<dl>
    <dd>a</dd>
    <dd>b
        <dl>
            <dd>c</dd>
            <dd>d</dd>
        </dl>
    </dd>
    <dd>e</dd>
</dl>

Result(Roughly like this)

1. a
2. b
 2.1. c
 2.2. d
3. e

Automatic numbering with CSS, without the need for JavaScript.

## counter basic form
```
<style>
body {
	counter-reset: num 0;	/* Set num to 0. */
}
div:before {
	counter-increment: num 1;	/* Number of num increases */
	content: counter(num);	/* Display format */
}
</style>
<body>
	<div>abc</div>
	<div>def</div>
	<div>ghi</div>
</body>
```
Result
```
1abc
2def
3ghi
```

## Add padding to counter basic form

```
<style>
body {
	counter-reset: num 0;
}
div:before {
	counter-increment: num 1;
	content: counter(num);
	padding-right: 10px;	/* add */
}
</style>
<body>
	<div>abc</div>
	<div>def</div>
	<div>ghi</div>
</body>
```
Result(Roughly like this)
```
1 abc
2 def
3 ghi
```

## For dl dd (I dare you not to use ol or ul)

```
<style>
dl {
	counter-reset: num 0;
}
dd {
	margin: 0;
}
dd:before {
	counter-increment: num 1;
	content: counter(num);
	padding-right: 10px;
}
</style>
<dl>
	<dd>abc</dd>
	<dd>def</dd>
	<dd>ghi</dd>
</dl>
```
Result(Roughly like this)
```
1 abc
2 def
3 ghi
```

## Text before and after the sequential number

```
<style>
dl {
	counter-reset: num 0;
}
dd {
	margin: 0;
}
dd:before {
	counter-increment: num 1;
	content: "about" counter(num) "gram";	/* Display format */
	padding-right: 10px;
}
</style>
<dl>
	<dd>abc</dd>
	<dd>def</dd>
	<dd>ghi</dd>
</dl>
```
Result(Roughly like this)
```
about1gram abc
about2gram def
about3gram ghi
```

## other

```
<style>
dl {
	counter-reset: num 0;
}
dd {
	margin: 0;
}
dd:before {
	counter-increment: num 1;
	content: "about" counter(num,lower-greek) "gram";
	padding-right: 10px;
}
</style>
<dl>
	<dd>abc</dd>
	<dd>def</dd>
	<dd>ghi</dd>
</dl>
```
Result(Roughly like this)
```
aboutαgram abc
aboutβgram def
aboutγgram ghi
```
variations:<br>
armenian<br>
cjk-ideographic<br>
decimal<br>
decimal-leading-zero<br>
georgian<br>
hebrew<br>
hiragana<br>
hiragana-iroha<br>
katakana<br>
katakana-iroha<br>
lower-alpha<br>
lower-greek<br>
lower-latin<br>
lower-roman<br>
upper-alpha<br>
upper-latin<br>
upper-roman

## nesting

```
<style>
dl {
	counter-reset: num;
}
dd {
	margin: 0 0 0 10px;
}
dd:before {
	content: counters(num, ".") ".";
	counter-increment: num;
	padding-right: 10px;
}
</style>
<dl>
	<dd>a</dd>
	<dd>b
		<dl>
			<dd>c</dd>
			<dd>d</dd>
		</dl>
	</dd>
	<dd>e</dd>
</dl>
```
Result(Roughly like this)
```
1. a
2. b
 2.1. c
 2.2. d
3. e
```