关于:before :after

首先要明白一种思想：结构和样式分离。

结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和 :after中的content: ""; ------就算没有------:before 和 :after中的content: "";------HTML文档也不会受到影响，HTML文档也是一个完整的文档，所以，用简单的话来说： :before 和 :after中的content: "";不过是对HTML的装潢，使HTML看起来更漂亮一些。举个例子：

1	<a href="#">知道更多</a>

以上这句语句，是一个链接，点击就能打开，就算没有任何CSS修饰，也不影响打开链接。但是，如果稍微修饰，这个链接就会看起来美观一些：

1 2 3

a:after {   content: "\00A0\000BB"; }

加上CSS修饰后，链接看起来就美观一些。

 

既然选择器是：:before 和 :after ，

那么选定的对象就是某个元素的前和后元素，样式当然也就是给选定元素的样式。

举例来说：

HTML文件中，有个链接：

1	<a href="#">知道更多</a>

对<a />标签使用样式，就是：

1 2 3 4

a:before {   content: "哈哈哈哈";   color: red; }

那么，用浏览器打开HTML文档，就会看见链接部分变成：

哈哈哈哈知道更多

其中：

哈哈哈哈

的字体是红色的，其它不变。

因为 a:before{} 这个选择器选择的是标签<a href="#">哈哈哈哈知道更多</a>中原来内容“知道更多”之前的我们加进去的部分“哈哈哈哈”。

这就证明：

1. 加进去的内容是属于这个标签内的一部分，CSS样式当然也仅仅对这部分有效；

2. 如果没有内容，那么样式表无效，因为CSS样式必须针对确实存在的内容。

   2.1 例如，如果

   a:before{

   content: "";   /*   没有内容  */

   color: red;

   }

   那么样式表无效，这就相当于：

   a:before{

   color: red;

   }