CSS content 属性
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
注意：
仅在CSS可用的现代浏览器下起作用。
不可通过DOM使用，它只是纯粹的表象。
content属性的值：
1.文本值，如：content:”这是添加的文字”
2.属性值，如：content:”attr(id)”//这句话将会获取元素的id属性的值，并作为内容添加
应用1:计数器
（counter-reset和counter-increment）
counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。
应用2：为多语言内容插入正确的引号
使用<q>标签，默认外层为 “ ，内层为 ’
quotes 属性设置嵌套引用（embedded quotation）的引号类型。
应用3：图片替换文字
缺点：不能对图片进行重复或平铺，或是使用image sprite
应用4：显示相对应的链接图标
指的是针对不同的链接类型，在链接的后面显示对应链接类型的图标。
例如，链接的对象是一个图片，则显示图片的小图标，如果链接对象是视频，则显示视频小图标，如果链接就是个URL网页链接，则显示链接的小图标
重点：
CSS计数器
1.counter-reset：重置计数器。
counter-reset 可以同时重置多个计数器。Counter-reset:ctr 1 subctr 2; //这里同时重置了ctr和subctr两个计数器
2.counter-increment
3.counter()：是一个函数，其主要配合content一起使用。使用counter()来调用定义好的计数器标识符。
counter(name, style)
第二个参数style：可以不设置。
取值和list-style-type一样
counters(name, string, style)
第二个参数string：可以设置，连接序号的字符
实例地址：http://benlai.sinaapp.com/code/css_content.html
参考文章：http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/
http://www.w3cplus.com/css3/css-counters.html