css的content属性的具体使用

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、插入纯字符
    

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

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