css的content属性

content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符，其实它还有很多值可供选择。

1、插入纯字符

<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、插入图片

<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、插入元素属性

<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、插入当前元素编号(即当前元素索引)

这个特性可用于活动页面的规则介绍。

<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、插入当前元素编号(指定种类)

<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属性相关推荐

网页使用Font Awesome图标字体时，css定义 content 属性
网页使用Font Awesome图标字体时,css定义 content 属性必不可少,如下所示: .icon:before { content: '\f005'; font-famil ...
css的content属性，以及如何通过css content属性实现css计数器？
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>cs ...
CSS的content属性怎么用？
CSS中的Content属性用于动态生成内容(在运行时):该属性可以与伪元素::before或::after一起使用,用于插入生成内容.下面本篇文章就来给大家介绍一下,希望对大家有所帮助. CSS c ...
CSS中content属性的妙用
前言本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
[css] CSS content属性特殊字符有哪些？
[css] CSS content属性特殊字符有哪些? 今天在做开发的时候,需要用到CSS的content属性,加入一些特殊字符来实现网页效果.但是特殊字符那么多,怎么可能记得住,所以谷歌百度搜索之后 ...
常用的HTML和CSS content属性特殊字符归纳
今天在做开发的时候,需要用到CSS的content属性,加入一些特殊字符来实现网页效果.但是特殊字符那么多,怎么可能记得住,所以谷歌百度搜索之后找到了一个比较全的,在这里进行归纳备忘,为了和我有相同需 ...
【CSS系列】被忽略的content属性
CSS的 content属性,大家应该都不陌生,很多时候我们都使用过,一般情况下你看到最多的用法无外乎这样两种:一种用于清除浮动,一种用于我们经常使用的字体图标. .clear:after {cont ...
css4个伪元素,CSS_CSS3中的content属性使用示例，CSS中主要的伪元素有四个：befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...
css：before和after中的content属性
css有一个属性叫做content.content只能使用在:after和:before之中.它用于在元素之前或者元素之后加上一些内容就像这样: .email-address:before { co ...

css的content属性

1、插入纯字符

2、插入图片

3、插入元素属性

4、插入当前元素编号(即当前元素索引)

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

css的content属性相关推荐

最新文章

热门文章