css content 应用场景

1、content 插入内容

:after{

       

       content : "内容";

}

2、content 插入图片

:after{

     content  : url(1.png)；

}

 content 插入图片可插入音频和视频，但目前并没有得到浏览器的支持

3、获取某属性的值用于显示

:after{

     content  : attr (  alt )；

}

4、content  插入项目编号

h1：before{

     content : counter(  计数器名称，编号种类 )

}

编号种类：如 upper-roman：罗马字母

h1{

     counter-increment :   计数器名称

}

5、项目编号中追加文字

h1：before{

     content : ' 第counter( 计数器名称 )章’； // 项目编号中追加文字

     color:blue;  // 指定编号样式

}

6、编号嵌套：

h1：before{

     content : counter(  计数器名称)

}

h1{

     counter-increment :  计数器名称

}

h2：before{

     content : counter(  子计数器名称)

}

h2{

     counter-increment :    子 计数器名称；

     counter-reset :  子 计数器名称；//对子计算器进行重置

}

7、小编号中嵌入大编号

h2：before{

     content : counter(  大编号计数器名称)  '-'  counter(  小计数器名称) '.'；

}

8、在文字两边嵌套符号

h1:before{

    content :  open-quote;

}

h2:after{

    content :  close-quote;

}

h1{

     quotes : "(" ")";

}