content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符，其实它还有很多值可供选择。
1、插入纯字符
*{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: '插入纯字符'; } 1、插入纯字符
登录后复制
（推荐教程：CSS入门教程）
2、插入图片
*{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'); } 2、插入图片
登录后复制
3、插入元素属性
立即学习“前端免费学习笔记（深入）”；
*{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); } 3、插入元素属性
登录后复制
4、插入当前元素编号(即当前元素索引)
这个特性可用于活动页面的规则介绍。
*{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; } 4、插入当前元素编号(即当前元素索引)
- 我是第1个li标签
我是li标签中的第1个div标签 - 我是第2个li标签
- 我是第3个li标签
我是li标签中的第2个div标签 - 我是第4个li标签
- 我是第5个li标签
登录后复制
5、插入当前元素编号(指定种类)
*{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; } 5、插入当前元素编号(指定种类)
- 我是第1个li标签
我是li标签中的第1个div标签 - 我是第2个li标签
- 我是第3个li标签
我是li标签中的第2个div标签 - 我是第4个li标签
- 我是第5个li标签
登录后复制
相关视频教程推荐：CSS入门教程
以上就是css中的content属性该如何使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2886308.html
