Fe-interview: [css] 第136天 你有了解css计数器(序列数字字符自动递增)吗?如何通过css的content属性实现呢?

Created on 29 Aug 2019  ·  1Comment  ·  Source: haizlin/fe-interview

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

css

Most helpful comment

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>
````
```css
ul {
  counter-reset: count;
}
li::before {
  counter-increment: count;
  content: counters(count, '-')'.';
}
1.Item
2.Item
    2-1.Item
    2-2.Item

>All comments

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>
````
```css
ul {
  counter-reset: count;
}
li::before {
  counter-increment: count;
  content: counters(count, '-')'.';
}
1.Item
2.Item
    2-1.Item
    2-2.Item
Was this page helpful?
0 / 5 - 0 ratings