::after与::before的作用是什么？CSS中
上面是源代码，w3school里说，是在元素前后插入生成内容。如果是插入一张图片，插入一段文字，那很好理解，可是这里插入的是样式呀，没有::after和::before不是一样可以插入样式吗？
好吧，我换个方式问，那后面{大括号}内的样式，display: table;overflow: hidden;是在给谁做定义啊？我想到一个可能，会不会是只给content: ""中，双引号内的内容做定义？因为例子里面双引号内没有内容，我加了几个字母，并且给了color:red，后发现，果然新加的字母显示红色，但是我又觉得，既然双引号内没东西，这一行css就等于没用了啊，为什么还要写出来呢？求大神解答~~~
【另外，刚才有个哥们给我回答了，我还追问了两次，怎么他的回答就消失了呢？！度娘怎么了！】
【再另外，这是天猫中，右下角的我的购物车中的代码】 展开
就是可以在某个标签的前面或者后面添加一个虚拟元素，需结合content使用。
css可以对元素做的事，对这个伪元素都可以做，然后也不奇怪能做出个三角形了（三角形是用很宽的边框+内容宽高都为0做出来的）但是，伪元素因为不在DOM里存在，也不会在调试工具里显示，所以不太好调试。
伪对象：after还有一个重要的用法--清除浮动。这种清除浮动的方法几乎成了一个固定的模式，很多大型网站里面都有用到。
易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
以上内容参考：百度百科-CSS
首先要明白一种思想：结构和样式分离。
结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和 :after中的content: ""; ------就算没有------:before 和 :after中的content: "";------HTML文档也不会受到影响，HTML文档也是一个完整的文档，所以，用简单的话来说： :before 和 :after中的content: "";不过是对HTML的装潢，使HTML看起来更漂亮一些。
延展阅读
CSS中伪元素after的作用
css可以对元素做的事，对这个伪元素都可以做，然后也不奇怪能做出个三角形了（三角形是用很宽的边框+内容宽高都为0做出来的）。
但是，伪元素因为不在DOM里存在，也不会在调试工具里显示，所以不太好调试伪对象:after还有一个重要的用法--清除浮动。
这种清除浮动的方法几乎成了一个固定的模式，很多大型网站里面都有用到。
以下代码：
.weibo-clearfix:after{clear:both;content:".";display:block;height:0;width:0;visibility:hidden;}
首先要明白一种思想：结构和样式分离。
结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和 :after中的content: ""; ------就算没有------:before 和 :after中的content: "";------HTML文档也不会受到影响，HTML文档也是一个完整的文档，所以，用简单的话来说： :before 和 :after中的content: "";不过是对HTML的装潢，使HTML看起来更漂亮一些。举个例子：
<a href="#">知道更多</a>
以上这句语句，是一个链接，点击就能打开，就算没有任何CSS修饰，也不影响打开链接。但是，如果稍微修饰，这个链接就会看起来美观一些：
a:after {
content: "\00A0\000BB";
}加上CSS修饰后，链接看起来就美观一些。
我想问的是:before 和 :after后面大括号里，不是可以加display: table;overflow: hidden;color:red;等样式吗？这些样式是给谁定义的，谁会变成红色？
既然选择器是：:before 和 :after ，
那么选定的对象就是某个元素的前和后元素，样式当然也就是给选定元素的样式。
举例来说：
HTML文件中，有个链接：
<a href="#">知道更多</a>
对<a />标签使用样式，就是：
a:before {
content: "哈哈哈哈";
color: red;
}那么，用浏览器打开HTML文档，就会看见链接部分变成：
哈哈哈哈知道更多
其中：
哈哈哈哈
的字体是红色的，其它不变。
因为 a:before{} 这个选择器选择的是标签<a href="#">哈哈哈哈知道更多</a>中原来内容“知道更多”之前的我们加进去的部分“哈哈哈哈”。
这就证明：
加进去的内容是属于这个标签内的一部分，CSS样式当然也仅仅对这部分有效；
如果没有内容，那么样式表无效，因为CSS样式必须针对确实存在的内容。
2.1 例如，如果
a:before{
content: ""; /* 没有内容 */
color: red;
}
那么样式表无效，这就相当于：
a:before{
color: red;
}
不知道你这样能不能看清楚。
至于你所问的给谁做定义
.tm_cmbar_clearfix就是给这个做定义
你截图里的意思我懂，是在前面后面加文字嘛。你说的是给.tm_cmbar_clearfix定义样式，但是为什么要加:after和:before呢？不加也完全可以定义啊。然而实际上，.tm_cmbar_clearfix并没有受到大括号内的样式影响。我想到一个可能，会不会是只给content: ""中，双引号内的内容做定义？
content:就只要加的内容，，你所说的.tm_cmbar_clearfix这个没变化，那是因为你没有插入内容，至于为什么有这句在这里，这要看你实际CSS设计。
