QuickAnswer
by

CSS counter Auto-numbering summary

CSS counter Auto-numbering summary

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
Web Browser