有序列表的自定义列表样式

Question

是否可以为呈现类似

的有序列表定义样式

<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ol>

作为

（1）第1项

（2）第2项

（3）第3项

Answer 1

您可以使用css counter和:before伪元素来创建此类型的列表。

＆＃13;

＆＃13;

ol {
  counter-reset: custom;
  list-style-type: none;
}

ol li:before {
  content: '('counter(custom)') ';
  counter-increment: custom;
}

＆＃13;

<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ol>

＆＃13;

＆＃13;

＆＃13;