本文详细介绍了CSS的content属性在::before和::after伪元素中的用法，包括如何插入纯字符、图片以及元素的属性。通过实例展示了如何利用content属性实现元素编号的动态插入，以及如何改变元素编号的样式。对于前端开发者理解并掌握CSS伪元素的高级用法具有指导意义。
content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。
用法详解
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标签
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标签
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
