css里面content 无法调用,详解css中的content属性的用法

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标签

我是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快速入门