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 : "(" ")";

}