css的content属性的具体使用

时间：2021-05-08

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; 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{ 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章