REDLINE MAGAZINE

このページは　入れ子OLリストにCSSのカウンタで番号を振る方法　のサンプルページです。

1. テキスト１
   1. 入れ子１段階目テキスト１
   2. 入れ子１段階目テキスト２
2. テキスト２
   1. 入れ子２段階目テキスト１
   2. 入れ子２段階目テキスト２
      1. 入れ子３段階目テキスト１
      2. 入れ子３段階目テキスト２
      3. 入れ子３段階目テキスト３
   3. 入れ子２段階目テキスト３

このサンプルのHTML

<ol>
  <li>テキスト１
    <ol>
      <li>入れ子１段階目テキスト１</li>
      <li>入れ子１段階目テキスト２</li>
    </ol>
  </li>  
  <li>テキスト２
    <ol>
    <li>入れ子２段階目テキスト１</li>
    <li>入れ子２段階目テキスト２
      <ol>
        <li>入れ子３段階目テキスト１</li>
        <li>入れ子３段階目テキスト２</li>
        <li>入れ子３段階目テキスト３</li>
      </ol>
    </li>
    <li>入れ子２段階目テキスト３</li>
    </ol>
  </li>
</ol> 

このサンプルのCSS

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