大家好，我是IT修真院成都分院第九期的学员徐炜，一枚正直纯洁善良的前端程序员。今天给大家带来的是css中centent属性的几种用法。
一.背景介绍
学习前端知识我们常常提到盒模型，盒模型的几个要素，margin、border、padding 、content这四个属性，前三个经常用到讲到，但第四个content属性怎么用？ content顾名思义，就是“内容”，它的作用就是在css中直接生成网页显示的内容。content属性还有一些新的特征，例如：插入以及移除文档内容的能力，以创建脚注，结语，及段落注释。 但是目前暂时还没有浏览器支持content的扩展功能。
二.知识剖析
content 属性与 ::before 及 ::after 伪元素配合使用，用于定义元素之前或之后放置的生成内容。 ::before和::after的作用就是在指定的元素内容之前或者之后插入一个包含content属性指定内容的行内元素. 需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到， 这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。
三.常见问题
为什么content属性很少用到?
四.解决方案
一是因为兼容性的问题，content仅在CSS可用的现代浏览器下起作用；二是因为content需要和:after与:before结合起来使用， 而伪元素不是真实的dom节点，只是实现了一些特定的效果，无法绑定事件，就无法过DOM进行操作使用。
五.编码实战
1.插入纯文字。content属性与 ::before 及 ::after 伪元素配合使用生成文本内容。
2.嵌入文字符号。使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote用于添加开始的文字符号，close-quote用于添加结束的文字符号。
3.插入图片。content属性也可以直接在元素前/后插入图片， content:url()。
4.插入元素的属性值。content属性可以直接利用attr获取元素的属性，将其插入到对应位置。 attr（attribute），是属性的意思，attr(href)，也就是获取href里面的值填充到content里面啊，这是css3的用法。 语法为::after{content:attr(href);}
5.计数器用法。content属性可以插入编号，可以修饰，可以指定编号种类，还可以在编号中进行嵌套。
实战演示demo，详见视频。
六.扩展思考
content:"."是怎么实现清除浮动的？
如果有一个DIV作为外部容器，内部的dIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。 这个对这个盒子使用：：after这个伪元素，在盒子的结尾添加content属性，添加了一个句号"."， 并设置display为block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的。
七.参考文献
参考一： CSS3的content属性详解
参考二：菜鸟教程对content的解释
参考三：W3C对content的解释
八.更多讨论
问题一：content在浏览器兼容情况怎么样？
目前主流浏览器基本都支持counter-reset属性。注意： 因为在IE6 和IE7 以及IE8的IE7兼容模式中，:before 和:after 都不被支持，所以可以认为它们都不支持content 属性，测试也就毫无意义，所以这个列表将IE6、IE7和IE8的IE7兼容模式忽略。IE8只有指定!DOCTYPE才支持counter-reset属性。
问题二：content设置的计数器除了用来计数还有什么其他的作用？
除了生成篇数、章节和段落以外，CSS计数器还被应用于计算数据类型的小游戏当中。
问题三：clear:left、clear:right与clear：both的用法？
凡是clear:left或者clear:right起作用的地方，一定可以使用clear:both替换。原因在于，clear属性是让自身不能和前面的浮动元素相邻，而float属性要么就left要么就right，不可能同时存在。由于clear属性对“后面的”浮动元素不闻不问，因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left等同于设置clear:both，反之亦然。
感谢黄志波|罗宇|隋鑫师兄和冯馨雨师姐，此教程是在他们之前技术分享的基础上完善而成。
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~