css中content属性,有什么作用?有什么应用?

1.背景介绍

content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被所有主流浏览器支持。

在CSS 3 Generated Content工作草案中,content属性添加了更多的特征,例如:插入以及移除文档内容的能力,以创建脚注,结语,及段落注释。但是目前还没有浏览器支持content的扩展功能。

2.知识剖析

1.content属性与 :before 及 :after 伪元素配合使用生成文本内容


2.通过attr()将选择器对象的属性作为字符串进行显示


3.用计数器为文档添加序号

css代码:

html代码:


效果:


3.常见问题

如何为不同的语言使用不同的标点符号?

4.解决方案

使用content可以使得不同的语言使用对应的一些字符。


5.编码实战

详见视频:


css中content属性_腾讯视频


6.扩展思考

content实际上很少的使用,它不可通过DOM使用,它只是纯粹的表象。

7.参考文献

参考一:segmentfault上的css3 content详解

参考二:张鑫旭 CSS content内容生成技术以及应用

参考三:CSS counter计数器

8.更多讨论

1、content是否可以添加图片?

2、content什么时候使用?

3、伪类和伪元素的区别?


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,993评论 19 139
  • 初七,再过一周就要开学了!我,已经开始处于焦虑中⋯⋯ 每学期的开学前一周我都会如此焦虑。为什么?...
    被风拂过的人阅读 197评论 0 0
  • 从睡梦中惊醒 原来是你不在身边 似梦非梦的夜晚 情绪也染上一层薄薄的哀愁
    无根之木阅读 203评论 0 1
  • 前些天,同学群里有人发了一条消息,说是某医生,专业针灸推拿,因为要报考中级职称,需要搜集病例样本写报告,所以...
    周越野阅读 834评论 0 2