css中content属性如何用

今天小编给大家分享一下css中content属性如何用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

创新互联公司专注于沂南网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供沂南营销型网站建设,沂南网站制作、沂南网页设计、沂南网站官网定制、成都微信小程序服务,打造沂南网络公司原创品牌,更为您提供沂南网站排名全网营销落地服务。

在css中,content属性与“:before”以及“:after”伪元素配合使用,用于插入内容,语法为“content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;”。

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css中content属性使用方法

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

语法为:

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

指定属性值如下:
css中content属性如何用

示例如下:





123



创新互联 - 程序员梦开始的地方。

哔哩哔哩弹幕网 - 好用的学习网站。

输出结果:

css中content属性如何用

示例如下:

插入当前元素编号(指定种类)

css中content属性如何用

css:

html:


    

5、插入当前元素编号(指定种类)

             
                
  • 我是第1个li标签
  •             
    我是li标签中的第1个div标签
                
  • 我是第2个li标签
  •             
  • 我是第3个li标签
  •             
    我是li标签中的第2个div标签
                
  • 我是第4个li标签
  •             
  • 我是第5个li标签
  •         
    

以上就是“css中content属性如何用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


网站标题:css中content属性如何用
URL标题:http://azwzsj.com/article/gseejd.html

其他资讯