自訂 <ol> <li> 的項目標式方式 (list-style-type 配合 @counter-style)

html 中 <ol> <li> 的項目標式方式，可以使用 css 的 list-style-type 屬性配合  @counter-style 來自訂項目顯示方式，這裡演示一個將

list-style-type : trad-chinese-informal

擴展成自己想要的項目清單顯示方式，例如此例把

一、二、三

改成：

(一)、(二)、(三)

源碼如下：

Html：

<ol class="my-custom-list-style">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

CSS：

ol.my-custom-list-style {
  list-style-type: my-custom-list-style-type;
}

@counter-style my-custom-list-style-type {
  prefix: "(";
  suffix: ")";
  system: extends trad-chinese-informal;
}

成品如下：