content可能的值div::after{ content: “普通字符串”; content: attr(父元素的html属性名称); content: url(图片、音频、视频等资源的url); /* 使用unicode字符集，采用4位16进制编码，但不同的浏览器显示存在差异，而且移动端识别度更差*/ content: “\21e0”; /* content的多个值可以任意组合，各部分通过空格分隔 / content: “’” attr(title) “’”; / 自增计数器，用于插入数字/字母/罗马数字编号 / content: counter(<identifier>, <list-style-type>); / 以父附属元素的qutoes值作为content的值*/ content: open-quote | close-quote | no-open-quote | no-close-quote;}插入纯文字content:“string”，或content:none不插入内容h1::after{ content:“h1后插入内容”}h2::after{ content:none}字符集<p class=“phoneNumber”>13900001390</p>.phoneNumber::before{ content:’\260E’; font-size: 16px;}插入图片content属性也可以直接在元素前/后插入图片h3::after{ content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)}插入元素的属性值content属性可以直接利用attr获取元素的属性，将其插入到对应位置。<a href=“http:///www.ido321.com”>这是链接&nbsp;&nbsp;</a>a:after{ content:attr(href);}计数器counter 调用计数器，可以不使用列表元素实现序号功能。counter 要配合 counter-increment 和 counter-reset属性使用。content: counter(<identifier>, <list-style-type>);<list-style-type>: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alphacounter-reset: [<identifier> <integer>?]，给同级元素增加计数器用于标识自增计数器的作用范围，<identifier>为自定义名称，<integer>为起始编号默认为0。counter-increment: [<identifier> <integer>?]，增加计数器的值用于标识计数器与实际关联的范围，<identifier>为counter-reset中的自定义名称，<integer>为步长默认为1。<h1>大标题</h1><h2>中标题</h2><h3>小标题</h3><h3>小标题</h3><h2>中标题</h2><h3>小标题</h3><h3>小标题</h3><h1>大标题</h1><h2>中标题</h2><h3>小标题</h3><h3>小标题</h3><h2>中标题</h2><h3>小标题</h3><h3>小标题</h3>h1::before{ content:counter(h1)’.’;}h1{ counter-increment:h1; counter-reset:h2;}h2::before{ content:counter(h1) ‘-’ counter(h2);}h2{ counter-increment:h2; counter-reset:h3; margin-left:40px;}h3::before{ content:counter(h1) ‘-’ counter(h2) ‘-’ counter(h3);}h3{ counter-increment:h3; margin-left:80px;}qutoes<h1>大标题</h1>h1{ quotes:"(" “)”; /利用元素的quotes属性指定文字符号/}h1::before{ content:open-quote;}h1::after{ content:close-quote;}<h2>中标题</h2>h2{ quotes:""" “"”; /添加双引号要转义/}h2::before{ content:open-quote;}h2::after{ content:close-quote;}