counter-increment

連番リストなんてolでいいじゃないか。
まぁそう言わずに、counter-incrementを使えば、
単純な連番以外にスタイルも自由に付けられるのです。

サポートしているブラウザについては↓

HTMLソース

<div class="sample">
<ul>
<li>旅立ち
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
</li>
<li>出会い
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
</li>
<li>別れ
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
</li>
</ul>
</div>

CSS

.sample ul {
    counter-reset: number;
    list-style: none;
}
.sample ul li {
    counter-increment: number;
}
.sample ul li:before {
    content: "第"counters(number, "-")"章";
}

できたのが↓