css content

CSS生成内容

在CSS中可以使用content来生成内容,该特性最早是在CSS2规范中引入的,经过多年的发展,现在该规范已经进入到了Level 3版本。在实际开发中,时常能看到开发人员在伪元素::before::after中使用content为Web添加内容,只不过这些并不是DOM树中的一员,换句话说,可以在不调整HTML的情况下生成图标、图像、文本等。但很多开发人员可能只知道content添加一个值,事实上它有很多新的特性大家不太了解,接下来这篇文章我们就来和大家探讨这方面的知识。

如何从css生成内容和计数组件中得到益处

CSS生成内容对大家来说并不陌生,使用伪类(伪元素)配合“content”属性添加内容。大家可以通过这个属性给元素添加“字符串”、“图标”和“空格”等,其实除了这些之外,还可以添加计数器编码。计数器(counter-increment、counter-reset)我想有很多同学都没有接触过,因为在平时的使用中相当的少。其实早在去年Red TeamCSS3 ordered list styles中文版本)中就分享了这两个属性。当然这里只是初步介绍了一下,并没有深入的讲解。而在2009年根据CSS Content, Counter-Increment & Counter-Reset一文译了篇《CSS content, counter-increment 和 counter-reset详解》,里面详细介绍这个属性。今天D姐根据的英文文章原名《How To Benefit From CSS Generated Content And Counters》进行翻译,再次向大家介绍了CSS如何生成内容,如何使用计数器属性。

返回顶部