知道CSS有个CONTENT属性吗?有什么作用?有什么应用?

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员

今天给大家分享一下,修真院官网css任务15,深度思考中的知识点——知道CSS有个CONTENT属性吗?有什么作用?有什么应用?

1.背景介绍

css有一个属性叫做content。content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些内容

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

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

2.知识剖析

before和after是什么呢?

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素.需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性,比如字体等。

3.常见问题

如何使用:after和:before中的content属性呢?

4.解决方法

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



我是标题h1!

5.编码实战

demo

6.拓展思考

强大的CSS3 attr()方法。

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


7.参考文献

参考一:segmentfault上的css3 content详解

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

参考三:CSS counter计数器

8.更多讨论

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


视频链接

密码: p68a

ppt链接


感谢大家观看

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

我的邀请码:12361358,或者你可以直接点击此链接:http://www.jnshu.com/login/1/12361358

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 我知道你不爱我 可我还为你执着 我不愿 就这样 将你给错过 我知道你不爱我 又何必这样难过 也许这样的结果 是我的...
    零莫阅读 3,382评论 0 1
  • 9月21日王倩晚自省: 每天睡觉前一定要反省自己:(2017.09.21) 1.我今天做了哪件让家人高兴的事?孝顺...
    胡芳叶梦之蓝阅读 3,486评论 0 0
  • 我学习Beyong Feelings已经有一个月了,但上一周是我坚持最完整的一周。该怎么说这一周的学习呢?我觉得...
    王钰榕阅读 1,586评论 0 1