伪元素:before和:after -使用伪元素:befo"/>

Css3之高级-2 Css内容生成(内容生成计数器)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Css3之高级-2 Css内容生成(内容生成计数器)相关的知识,希望对你有一定的参考价值。

一、内容生成


内容生成示例

技术分享


伪元素 :before 和 :after

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

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

技术分享


内容content

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

  - 常用的取值

      - url : 图像

      - 字符串 : 纯文本

      - 计数器

技术分享


二、计数器


计数器示例

技术分享


content-reset 属性

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

      - 默认为 0

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

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

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

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

技术分享


counter() 函数

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

  - 语法为 : counter(name)

      - name 为计数器的名称

技术分享


counter-increment 属性

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

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

      - 可以是正值或负值

技术分享



总结:本章内容主要介绍了 Css内容生成(内容生成、计数器)


本文出自 “技术交流” 博客,谢绝转载!

以上是关于Css3之高级-2 Css内容生成(内容生成计数器)的主要内容,如果未能解决你的问题,请参考以下文章

CSS content内容生成技术以及应用

是否可以让浏览器搜索 CSS 生成的内容?

深入理解CSS伪元素

零基础学前端之css3高级特效

零基础学前端之css3高级特效

css counter计数器与content总结