css的content属性的具体使用
发布时间:2019-02-14 15:43:19 作者:heath_learning 我要评论
这篇文章主要介绍了css的content属性的具体使用,用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符,其实它还有很多值可供选择。感兴趣的可以了解一下
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符,其实它还有很多值可供选择。
1、插入纯字符
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < style > *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .content.only-text::before{ content: '插入纯字符'; } </ style > < body > < h1 >1、插入纯字符</ h1 > < div class = "content only-text" ></ div > </ body > |
2、插入图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < style > *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .content.fill-image::before{ content: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png'); } </ style > < body > < h1 >2、插入图片</ h1 > < div class = "content fill-image" ></ div > </ body > |
3、插入元素属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < style > *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .content.fill-dom-attr::before{ content: attr(data-title); } </ style > < body > < h1 >3、插入元素属性</ h1 > < div class = "content fill-dom-attr" data-title = "我是.fill-dom-attr元素的 data-title 属性值" ></ div > </ body > |
4、插入当前元素编号(即当前元素索引)
这个特性可用于活动页面的规则介绍。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | < style > *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .fill-dom-index li{ position: relative; /* 给计数器加器起个名字,它只会累加 li 标签的索引,li元素中间的div并不会理会 */ counter-increment: my; } .fill-dom-index li div::before{ /* 使用指定名字的计算器 */ content: counter(my)'- '; color: #f00; font-weight: 600; } </ style > < body > < h1 >4、插入当前元素编号(即当前元素索引)</ h1 > < div class = "content fill-dom-index" > < ul > < li >< div >我是第1个li标签</ div ></ li > < div >我是li标签中的第1个div标签</ div > < li >< div >我是第2个li标签</ div ></ li > < li >< div >我是第3个li标签</ div ></ li > < div >我是li标签中的第2个div标签</ div > < li >< div >我是第4个li标签</ div ></ li > < li >< div >我是第5个li标签</ div ></ li > </ ul > </ div > </ body > |
5、插入当前元素编号(指定种类)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | < style > *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .fill-dom-index2 li{ position: relative; counter-increment: my2; } .fill-dom-index2 li div::before{ /* 第二个参数为list-style-type,可用值见: http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/ content: counter(my2,lower-latin)'- '; color: #f00; font-weight: 600; } </ style > < body > < h1 >5、插入当前元素编号(指定种类)</ h1 > < div class = "content fill-dom-index2" > < ul > < li >< div >我是第1个li标签</ div ></ li > < div >我是li标签中的第1个div标签</ div > < li >< div >我是第2个li标签</ div ></ li > < li >< div >我是第3个li标签</ div ></ li > < div >我是li标签中的第2个div标签</ div > < li >< div >我是第4个li标签</ div ></ li > < li >< div >我是第5个li标签</ div ></ li > </ ul > </ div > </ body > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
使用CSS content的attr实现鼠标悬浮提示(tooltip)效果
这篇文章主要介绍了使用CSS content的attr实现鼠标悬浮提示(tooltip)效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-10-10- 本文讲讲述伪元素以及功能强大的Contet属性,文章通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧2018-09-18
- 今天通过本文给大家介绍一个fit-content属性的相关知识,CSS属性是用来水平居中的,fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水2017-09-07
CSS3弹性布局内容对齐(justify-content)属性使用详解
这篇文章主要介绍了CSS3弹性布局内容对齐(justify-content)属性使用详解,具有一定的参考价值,有兴趣的可以了解一下2017-07-31浅谈html特殊字符 编码css3 content:"我是特殊符号"
下面小编就为大家带来一篇浅谈html特殊字符 编码css3 content:"我是特殊符号"。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-09-09- 下面小编就为大家带来一篇深入理解css中的align-content属性。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-25
- content属性最基本的功能是处理文本,但实际能用到content的地方却非常多,比如图标和url处理,以及下面将要提到的计数器例子,接下来就总结一下CSS中的content属性使用教程:2016-05-12
- 这篇文章主要介绍了CSS3中的content属性使用示例,是为CSS3入门学习中的基础知识,需要的朋友可以参考下2015-07-20
css中的content: "." 有什么用?为什么要用他?
有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV导致不能被撑开,在应用clearfix的元素的结尾添加content中的内容,就达到了撑开容器的目的2014-05-13- 网页制作Webjx文章简介:利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。2009-04-02
最新评论