Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

ajycc20

ajycc20 commented on Aug 30, 2019

@ajycc20

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@ajycc20

        Issue actions

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