共计 1998 个字符，预计需要花费 5 分钟才能阅读完成。
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”> 这是链接 </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-alpha
counter-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;
}
