今天我转了一篇有关:before和:After伪元素的详细介绍，希望对大家有益，同时自己也复习一下css的知识。
CSS样式表的主要作用是修饰Web页面上的HTML标记，但有时候，为了实现某个效果而往页面里反复添加某个HTML标记很繁琐，或者是显得多余，或者是由于某种原因而做不到。这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方，所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。
事实上，伪元素在CSS里是一系列的元素，比如:first-line, :first-letter, ::selection, :before 和 :after，但在本文中，我们将只讲解 :before 和 :after 这两个。让我们先了解一下这种技术的基本知识。
伪元素语法
早在CSS1里就已经有了伪元素的概念，但我们今天要说的 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before & ::after – 这个样子，用来跟“伪类(pseudo-classes)”区分开，(例如 :hover, :active, 等)。
浏览器对伪元素的支持
然而，不论你使用单冒号还是双冒号语法，浏览器都能识别。因为IE8只支持单冒号的语法，所以，如果你想兼容IE8，保险的做法是使用单冒号。
:before和:after伪元素能干嘛？
简言之，这两个伪元素会在真正页面元素之前和之后插入一个额外的元素，从技术角度上讲，它们与下面的HTML标记是等效的。
<p>
<span>:before</span>
这里是真正元素的内容
<span>:after</span>
</p>
在Web页面的HTML源代码里，你实际上找不到它们，但从视觉上，你却能看到它们的存在，所以我们用这个“伪”字就是表示它们假元素。
:before和:after伪元素的用法
:before和:after伪元素的用法十分简单；下面的代码样例中， :before 和 :after 将会在 blockquote 元素之前和之后插入新内容，它使用content属性，也就是在内容上进行操作。
下面的代码中一个引号标记将出现在blockquote元素的之前和之后。
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
:before和:after伪元素的CSS样式
:before和:after虽然是伪元素，但它们所有用法和行为表现和真正的元素几乎完全一样；我们可以对它们进行任何的CSS样式设置，例如，改变它们的前景颜色，增加背景色/图，调整字体大小，调整对齐方式等等。
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
}
:before和:after伪元素宽度和高度设置
:before和:after伪元素在页面中生成的元素在缺省情况下是“内联(inline)”元素，如果我们想指定它们的高度和宽度，需要首先定义它们为一个block元素，使用display: block;。
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
/** 定义成 block 元素 **/
display: block;
height: 25px;
25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
/** 定义成 block 元素 **/
display: block;
height: 25px;
25px;
}
给:before和:after伪元素添加背景图/背景色
我们不仅可以设置content的文字内容，而且可以给它添加图片和背景图片。尽管content 属性直接支持url()语法来插入一个图片，但在大多数情况下，我们更常用的是使用background属性来控制图片的显示。
blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
background: url(images/quotationmark.png) -3px -3px #ddd;
display: block;
height: 25px;
25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
background: url(images/quotationmark.png) -1px -32px #ddd;
display: block;
height: 25px;
25px;
}
然而，你也看到了，在上面的代码片段中，我们仍然声明了content属性，并设置它的值为空字符串。这个content属性，在这里是必须的，如果没有它，这些伪元素将不能正常显示。
将:before和:after伪元素和伪类(pseudo-classes)混合使用
尽管伪元素和伪类是不同的东西，但我们可以将它们在同一个CSS规则里混合使用，例如，如果你想要这样的一个效果：当鼠标移动到blockquote元素上时，由伪元素生成的“引号”的颜色变深，下面的代码就可以达到这样的效果。
blockquote:hover:after, blockquote:hover:before {
}
增加变化的过渡效果
我们甚至可以使用 transition 属性来创建一个优雅的颜色过渡效果。
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
目前大多数浏览器(火狐，谷歌浏览器，IE11)都支持伪元素的这种用法，但IE8/6肯定是不支持这些伪元素的特殊用法的，但随着使用这种老式浏览器的用户越来越少，我们就可以普遍使用这些最先进的CSS的伪元素用法，让web页面变得更漂亮，让Web用户体验更加愉悦。
CSS样式表的主要作用是修饰Web页面上的HTML标记，但有时候，为了实现某个效果而往页面里反复添加某个HTML标记很繁琐，或者是显得多余，或者是由于某种原因而做不到。这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方，所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。
事实上，伪元素在CSS里是一系列的元素，比如:first-line, :first-letter, ::selection, :before 和 :after，但在本文中，我们将只讲解 :before 和 :after 这两个。让我们先了解一下这种技术的基本知识。
伪元素语法
早在CSS1里就已经有了伪元素的概念，但我们今天要说的 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before & ::after – 这个样子，用来跟“伪类(pseudo-classes)”区分开，(例如 :hover, :active, 等)。
浏览器对伪元素的支持
然而，不论你使用单冒号还是双冒号语法，浏览器都能识别。因为IE8只支持单冒号的语法，所以，如果你想兼容IE8，保险的做法是使用单冒号。
:before和:after伪元素能干嘛？
简言之，这两个伪元素会在真正页面元素之前和之后插入一个额外的元素，从技术角度上讲，它们与下面的HTML标记是等效的。
<p>
<span>:before</span>
这里是真正元素的内容
<span>:after</span>
</p>
在Web页面的HTML源代码里，你实际上找不到它们，但从视觉上，你却能看到它们的存在，所以我们用这个“伪”字就是表示它们假元素。
:before和:after伪元素的用法
:before和:after伪元素的用法十分简单；下面的代码样例中， :before 和 :after 将会在 blockquote 元素之前和之后插入新内容，它使用content属性，也就是在内容上进行操作。
下面的代码中一个引号标记将出现在blockquote元素的之前和之后。
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
:before和:after伪元素的CSS样式
:before和:after虽然是伪元素，但它们所有用法和行为表现和真正的元素几乎完全一样；我们可以对它们进行任何的CSS样式设置，例如，改变它们的前景颜色，增加背景色/图，调整字体大小，调整对齐方式等等。
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
}
:before和:after伪元素宽度和高度设置
:before和:after伪元素在页面中生成的元素在缺省情况下是“内联(inline)”元素，如果我们想指定它们的高度和宽度，需要首先定义它们为一个block元素，使用display: block;。
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
/** 定义成 block 元素 **/
display: block;
height: 25px;
25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
/** 定义成 block 元素 **/
display: block;
height: 25px;
25px;
}
给:before和:after伪元素添加背景图/背景色
我们不仅可以设置content的文字内容，而且可以给它添加图片和背景图片。尽管content 属性直接支持url()语法来插入一个图片，但在大多数情况下，我们更常用的是使用background属性来控制图片的显示。
blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
background: url(images/quotationmark.png) -3px -3px #ddd;
display: block;
height: 25px;
25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
background: url(images/quotationmark.png) -1px -32px #ddd;
display: block;
height: 25px;
25px;
}
然而，你也看到了，在上面的代码片段中，我们仍然声明了content属性，并设置它的值为空字符串。这个content属性，在这里是必须的，如果没有它，这些伪元素将不能正常显示。
将:before和:after伪元素和伪类(pseudo-classes)混合使用
尽管伪元素和伪类是不同的东西，但我们可以将它们在同一个CSS规则里混合使用，例如，如果你想要这样的一个效果：当鼠标移动到blockquote元素上时，由伪元素生成的“引号”的颜色变深，下面的代码就可以达到这样的效果。
blockquote:hover:after, blockquote:hover:before {
}
增加变化的过渡效果
我们甚至可以使用 transition 属性来创建一个优雅的颜色过渡效果。
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
目前大多数浏览器(火狐，谷歌浏览器，IE11)都支持伪元素的这种用法，但IE8/6肯定是不支持这些伪元素的特殊用法的，但随着使用这种老式浏览器的用户越来越少，我们就可以普遍使用这些最先进的CSS的伪元素用法，让web页面变得更漂亮，让Web用户体验更加愉悦。