[css] 第136天你有了解css计数器（序列数字字符自动递增）吗？如何通过css的content属性实现呢？ #1129

haizhilin2013 · 2019-08-29T20:46:05Z

第136天你有了解css计数器（序列数字字符自动递增）吗？如何通过css的content属性实现呢？

ajycc20 · 2019-08-30T07:48:46Z

counter-reset:设置计数器 counter-reset: count 0 /* 计数器从1开始 */
counter-increment: 递增数值 counter-increment: count 2 /* 用于count 每次递增2 */
eg.

<ul>
  <li>Item</li>
  <li>Item</li>
  <ul>
    <li>Item</li>
    <li>Item</li>
  </ul>
</ul>

ul {
  counter-reset: count;
}
li::before {
  counter-increment: count;
  content: counters(count, '-')'.';
}

1.Item
2.Item
    2-1.Item
    2-2.Item

haizhilin2013 added the css label Aug 29, 2019

Provide feedback