Nested CSS counter

Numbering the items of a multilevel list by means of CSS only:

Data
Data
1. Data
2. Data
  1. Data
  2. Data
  3. Data
3. Data
Data

HTML code:


<ol>
	<li>Data</li>
	<li>Data
		<ol>
			<li>Data</li>
			<li>Data
				<ol>
					<li>Data</li>
					<li>Data</li>
					<li>Data</li>
				</ol>
			</li>
			<li>Data</li>
		</ol>
	</li>
	<li>Data</li>
</ol>

CSS code:


ol {list-style-type: none; counter-reset: number;}
ol li {counter-increment: number;}
ol li:before {content: counters(number, ".") ". ";}

Links

Using CSS counters developer.mozilla.org/en-US/docs/Web/CSS/Guides/Counter_styles/Using_counters

Browser support

Windows: Internet Explorer 8.0+; Edge 12.0+; Firefox 1.5+; Google Chrome 2.0+; Opera 10.0+
Linux: Firefox 1.5+; Google Chrome 2.0+; Opera 10.0+
iOS: Safari 1.0+
Android: Samsung Internet 1.0+; Chrome Android 18.0+; Firefox for Android 25.0+; Opera Android 10.1+

More