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

这里是修真院前端小课堂,每篇分享文从

【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可以使得不同的语言使用对应的一些字符。

6.扩展思考
content实际上很少的使用,它不可通过DOM使用,它只是纯粹的表象。

7.参考文献
参考一:segmentfault上的css3 content详解

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

参考三:CSS counter计数器

8.更多讨论
1、content是否可以添加图片?

2、content什么时候使用?

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值