css中content的使用

1.显示具体内容（跟：after 和：before配合使用）

HTML： 

CSS  :  

效果如下：

2.通过attr（）显示标签的属性

HTML： 

CSS: 

效果如下： 

3.显示字符集图标 更多字符可以访问https://blog.youkuaiyun.com/sinat_17775997/article/details/52384680

4.图片替换文字

HTML： 

 

CSS:   

（2,4结合到一起，可以写出 给一个超链接加上末尾图标的效果，如 ）

 

效果如下： 文字全部被图片替换

5.计数器

counter-reset：创建或重置计数器（在父元素里创建计数器）    

counter-increment 传递一个或多个计数器的值

counter：使用计数器 在content里使用该属性

HTML：

CSS: 

效果如下：

 

6.用quotes控制引号的实际字符

HTML： 

CSS： 

效果如下：  从最外层开始匹配  也可以通过:lang伪属性对应指定不同的引号

 

在content中，可以设置开口引号和闭口引号

 （貌似用不用content 跟上面quotes的效果也一样，没啥影响）