連番をふるケースで、次のサンプル1のようにol要素が複数存在し、かつ通し番号にしたいときは、li要素にvalueで値を指定して、連番を引き継ぐことができます。

サンプル1

サンプル1のhtmlソース

<p>小見出し1</p>
<ol>
	<li>sample1-1</li>	
	<li>sample1-2</li>
</ol>
<p>小見出し2</p>
<ol>
	<li value="3">sample2-1</li>	
	<li>sample2-2</li>
</ol>

しかし、ol要素の数や連番をふる総数が多くなると、手作業での対応は難しくなります。そのようなときは、次のサンプル2のようなcontentプロパティのcounterを使った自動連番が役に立ちます。

サンプル2

サンプル2のhtmlソース

<p>小見出し1</p>	
<ol class="count">
	<li>sample1-1</li>	
	<li>sample1-2</li>
	<li>sample1-3</li>
</ol>
<p>小見出し2</p>
<ol class="count">
	<li>sample2-1</li>	
	<li>sample2-2</li>
</ol>
<p>小見出し3</p>
<ol class="count">
	<li>sample3-1</li>	
</ol>
<p>小見出し4</p>
<ol class="count">
	<li>sample4-1</li>	
	<li>sample4-2</li>
	<li>sample4-3</li>
</ol>

サンプル2のCSSソース

body {
	counter-reset: renban;
	}
.count {
	padding-left:20px;
	}
.count li {
	list-style-type: none;
	}
.count li::before {
	content : counter(renban) ". ";
	counter-increment: renban;
	padding-right: 5px;
	color:#333;
	}

サンプル2はサンプル1との比較のため、ol要素を使っていますが、ul要素でもかまいません。また、他のp要素やdiv要素などをリスト状に並べたものでは、さらに簡単な構造でcontentプロパティのcounterを使った自動連番が利用できます。

サンプル3

サンプル3のhtmlソース

<div class="box count2">
	<h4>小見出し1</h4>	
	<p>sample1-1</p>
	<p>sample1-2</p>
	<p>sample1-3</p>
	<h4>小見出し2</h4>
	<p>sample2-1</p>
	<p>sample2-2</p>
	<h4>小見出し3</h4>
	<p>sample3-1</p>
	<h4>小見出し4</h4>
	<p>sample4-1</p>
	<p>sample4-2</p>
	<p>sample4-3</p>
</div>

サンプル3のCSSソース

.count2 p {
	margin: 0 0 3px 20px;
	counter-increment: renban2;
	}
.count2 p:before {
	content : counter(renban2) ". ";
	padding-right: 5px;
	color: #333;
	}

olを使った箇条書きの開始番号を指定 + 昇降を逆に
CSS　contentプロパティのcounterを使い、cssのみで自動連番（１）
CSS　contentプロパティのcounterを使い、cssのみで自動連番（２）