自定义列表样式的有序列表 [英] Custom list style for ordered lists

问题描述

是否可以为有序列表定义样式，以呈现出类似

Is it possible to define a style for an ordered list that renders something like

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

as

（1）项目1

（2）项目2

（3）项目3

推荐答案

您可以使用 css计数器和：before 伪-元素以创建这种类型的列表。

You can use css counter and :before pseudo-element to create this type of list.

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

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

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

这篇关于自定义列表样式的有序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！