CSS Counter Styles

CSS Counter Styles

允许您自动对 HTML 文档中的元素进行编号或标记。我们定义一个具有特定名称和起始值的 counter，然后根据 CSS 规则递增或递减该计数器。

使用 counter-reset 属性定义计数器，设置其起始值，然后使用 counter-increment 属性根据需要递增或递减计数器。还可以使用 content 属性在 HTML 内容中显示计数器的当前值。

/* 
  counter-reset: [counter-name] [initial-value]; 
                  counter-name: 计数器的名称
                  initial-value: 计数器的初始值
*/

.ol {
  counter-reset: my-counter;
}

/* content: counter([counter-name]); */

.li::before {
  content: counter(my-counter) ". ";
}

• 自定义计数器样式

/*
  @counter-style [counter-name] {
    [attr]: [value]
  }
  counter-name: 计数器的名称
  attr: 样式的属性
  value: 样式的值
  
  相关属性/值：https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style#descriptors
*/

@counter-style emoji {
  system: cyclic;
  symbols: "

标签：Styles,style,counter,name,Counter,计数器,my,CSS	

From： https://www.cnblogs.com/chlai/p/18166654