css before content img,css系列之before或after中content

**单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素，不过浏览器需要同时支持旧的已经存在的伪元素写法，

比如:first-line、:first-letter、:before、:after等，单冒号(:)兼容性更好**

content可能的值

div::after{

content: "普通字符串";

content: attr(父元素的html属性名称);

content: url(图片、音频、视频等资源的url);

/* 使用unicode字符集，采用4位16进制编码，但不同的浏览器显示存在差异，而且移动端识别度更差*/

content: "\21e0";

/* content的多个值可以任意组合，各部分通过空格分隔 */

content: "'" attr(title) "'";

/* 自增计数器，用于插入数字/字母/罗马数字编号 */

content: counter(, );

/* 以父附属元素的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

}

字符集

13900001390

.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:after{

content:attr(href);

}

计数器

counter 调用计数器，可以不使用列表元素实现序号功能。

counter 要配合 counter-increment 和 counter-reset属性使用。

content: counter(, );

: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha

counter-reset: [?]，给同级元素增加计数器

用于标识自增计数器的作用范围，为自定义名称，为起始编号默认为0。

counter-increment: [?]，增加计数器的值

用于标识计数器与实际关联的范围，为counter-reset中的自定义名称，为步长默认为1。

大标题

中标题

小标题

小标题

中标题

小标题

小标题

大标题

中标题

小标题

小标题

中标题

小标题

小标题

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{

quotes:"(" ")"; /*利用元素的quotes属性指定文字符号*/

}

h1::before{

content:open-quote;

}

h1::after{

content:close-quote;

}

中标题

h2{

quotes:"\"" "\""; /*添加双引号要转义*/

}

h2::before{

content:open-quote;

}

h2::after{

content:close-quote;

}