CSS counter Auto-numbering summary
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
CONTENTS
JavaScript
Unreal Engine
CakePHP4
CakePHP4
Flutter
Flutter
Other
JavaScript
JavaScript
CakePHP4
Web Server
Photoshop
Unreal Engine
CakePHP4
Web Browser
Web Server
iOS
Android
Web Browser
CakePHP4
Plesk
Illustrator
Plesk
Web Server
Web Server
CakePHP3
Web Browser
CakePHP3
JavaScript
JavaScript
CakePHP3
CakePHP3