番号付きリストをCSSとcounter()関数でデザインしてみます。

HTMLは次の通りです。

<ol>
  <li>ピリオドつき
    <ol>
        <li>括弧つき
          <ol>
            <li>丸数字</li>
            <li>丸数字</li>
          </ol>
        </li>
        <li>括弧つき
          <ol>
            <li>丸数字</li>
          </ol>
        </li>
    </ol>
  </li>
  <li>ピリオドつき
    <ol>
        <li>丸数字</li>
        <li>丸数字</li>
        <li>丸数字</li>
    </ol>
  </li>
</ol>

実際の表示は次の通りです。

1. ピリオドつき
   
   1. 括弧つき
      
      1. 丸数字
      2. 丸数字
   2. 括弧つき
      
      1. 丸数字
2. ピリオドつき
   
   1. 丸数字
   2. 丸数字
   3. 丸数字

まずは最初の番号付きリストはピリオドつきにします。

numberというカウンターを作成しますが、

1. counter-reset: number;で一旦カウンターをゼロにします
2. counter-increment: number;でカウンターの値を増加します
3. content: counter(number);でカウンターを表示させます

という作業を繰り返します。

デザインは、インデントされるごとに

1. ピリオドつき
2. 括弧つき
3. 丸数字

と変えています。

スタイルシートは次の通りです。

li要素に position: absolute;を指定しているのは、番号付きリストでテキストインデントさせるためです。

.asset-content ol {
  counter-reset: number;
}
.asset-content ol li {
  position: relative;
　list-style: none;
}
.asset-content ol li:before {
  counter-increment: number;
  content: counter(number)". ";
  color: #94cc3d;
  position: absolute;
  top: 0;
  left: -1.5em;
  width: 3em;
  height: 1em;
}

次にインデントされた番号付きリストは括弧つきにします。

.asset-content ol li ol {
  counter-reset: number;
}
.asset-content ol li ol li {
  position: relative;
　list-style: none;
}
.asset-content ol li ol li:before {
  counter-increment: number;
  content: "("counter(number)")";
  color: #555;
  position: absolute;
  top: 0;
  left: -2em;
  width: 4em;
  height: 1em;
}

さらにインデントされた番号付きリストは丸数字にします。

.asset-content ol li ol li ol {
  counter-reset: number;
}
.asset-content ol li ol li ol li {
  position: relative;
　list-style: none;
}
.asset-content ol li ol li ol li:before {
  counter-increment: number;
  content: counter(number);
  font-size: 0.83em;
  background: #fff;
  color: #222;
  position: absolute;
  top: 0.3em;
  left: -2em;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid #888;
  border-radius: 50%;
  text-align: center;
}