一、内容生成


内容生成示例

wKioL1byFHyTUwcIAAFlwp7zPAE892.png


伪元素 :before 和 :after

  - 使用伪元素 :before 和 :after可以将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后

      - 实现为文档添加内容的效果

wKiom1byFPXydc5_AADyQx_rgIg188.png


内容content

  - content 属性与:before及:after 伪元素配合使用，来插入生成内容

  - 常用的取值

      - url : 图像

      - 字符串 : 纯文本

      - 计数器

wKioL1byFmiCfJQKAACkahet7KE597.png


二、计数器


计数器示例

wKiom1byF6-RPDTnAAE4TYAiQig550.png


content-reset 属性

  - counter-reset 属性用于定义计数器，并设置其初始值

      - 默认为 0

      - 可以设置或重置为正值或负值

  - 如果希望所定义的计数器在整个页面都能使用，则可以为<body> 元素声明计数器

      - 多个计数器名称之间使用空格隔开

  - 必须结合counter() 函数和 counter-increment 属性使用

wKioL1byGPXQ_H80AABTQEV66p4465.png


counter() 函数

  - counter() 函数用于指定计数器创建计数字符串

  - 语法为 : counter(name)

      - name 为计数器的名称

wKiom1byGLHAaCRzAAB0EXOz9Z8818.png


counter-increment 属性

  - counter-increment 属性用于设置某个选择器每次出现的计数器增量，默认增量是1

      - 计数器可以递增，默认增量是1

      - 可以是正值或负值

wKioL1byGbSh3ypLAACupZsWBC8847.png



总结：本章内容主要介绍了 Css内容生成（内容生成、计数器）