:before：

伪元素在元素之前添加内容

一般格式如下：

h1:before{
    content:"hahah";
}



h1:before
  {
  content:url(beep.wav);
  }

:after

伪元素在元素之后添加新内容 

用法与before类似。

CSS伪元素是用来添加一些选择器的特殊效果。
CSS伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。
语法
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：
实例
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
注意："first-line" 伪元素只能用于块级元素。
注意： 下面的属性可应用于 "first-line" 伪元素：font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
实例
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
注意： "first-letter" 伪元素只能用于块级元素。
注意： 下面的属性可应用于 "first-letter" 伪元素：font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear
提示：有关 first-letter 伪元素的相关描述，你可以参考本站的CSS :first-letter 伪元素一节。
伪元素和CSS类
伪元素可以结合CSS类：
p.article:first-letter {color:#ff0000;}
A paragraph in an article
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
Multiple Pseudo-elements
可以结合多个伪元素来使用。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
实例
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 
元素前面插入一幅图片：
实例
h1:before
{
content:url(smiley.gif);
}
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 
 元素后面插入一幅图片：
实例
h1:after
{
content:url(smiley.gif);
}
所有CSS伪类/元素选择器示例示例说明
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个
 元素的第一个字母
:first-linep:first-line选择每个
 元素的第一行
:first-childp:first-child选择器匹配属于任意元素的第一个子元素的  元素
:beforep:before在每个
元素之前插入内容
:afterp:after在每个
元素之后插入内容
:lang(language)p:lang(it)为
元素的lang属性选择一个开始值

CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。
先介绍一下伪类和伪元素有什么区别？其实这是个纯概念上的问题，就算不理解也不影响实际的使用。但作为一个CSSer，概念这种东西有时候就像地基，地基越牢固，将来大厦也越坚挺。
伪类就是给既存的元素模拟新添加一个类来实现某种效果。伪元素就是模拟新添加一个元素来实现某种效果。不明白？举个例子就明白了。
用伪类:first-child将第一个p设成红色：
p:first-child {color: red}
第一个段落
    //我将变成红色
第二个段落
等价于手动给DOM元素添加类：
.first-child {color: red}
第一个段落
第二个段落
那伪元素呢？用伪元素::first-letter给第一个字设成红色：
p::first-letter {color: red}
第一个段落
第二个段落
如果不用伪元素，你需要多加一个元素(如span)这样来实现：
.first-letter {color: red}
第一个段落
第二个段落
再回过头感受一下：伪类就是给既存的元素模拟新添加一个类来实现某种效果。伪元素就是模拟新添加一个元素来实现某种效果。现在我们来看看具体有哪些伪类和伪元素。
伪类：
可细分6类：动态，UI元素状态，目标，语言，结构，否定
动态伪类选择器：:link，:visited，:hover，:active，:focus。非常常用，从名字就能开出用途(事实上所有伪类选择器从名字上都能看出用途)，具体就不赘述了。太基础的东西还是自行参考W3C吧
UI元素状态伪类选择器：:checked，:enabled，:disabled。常用且简单，不赘述。
目标伪类选择器：:target用来获取锚点#部分。页面实现跳转定位很多都是使用a标签的锚点来来定位。其实背后的原理是a标签的href属性能改变浏览器的location.hash，让页面在有滚动条的前提下实现页面内跳转。:target的作用就是获取跳转的目标元素，如下可以获取到id为logo的div：
…
jump to logo
语言伪类选择器：:lang根据lang属性匹配元素，如
    //可在html标签上设，也可以
标签里设
:lang(en) { …… }    //根据页面的不同的语言(如英语和法语)对不同DOM元素进行处理
:lang(fr) { …… }
结构伪类选择器：:first-child，:last-child，:nth-child(n)，:nth-last-child(n)，:nth-of-type(n)，:nth-last-of-type(n)，:first-of-type，:last-of-type，:only-child，:only-of-type，:root，:empty。
:first-child看名字就知道了，第一个孩子。等同于:nth-child(1)。
:last-child看名字就知道了，最后一个孩子。等同于:nth-last-child(1)。
:nth-child(n)该标签是某类型，并且是父标签里第n个孩子。反之:nth-last-child(n)就是倒数第n个孩子。
:nth-of-type(n)父标签里第n个某类型的孩子。反之:nth-last-of-type(n)父标签里倒数第n个某类型的孩子。
:nth-child(n)和:nth-of-type(n)这两个伪类的参数n从0开始，你可以写出任意喜欢(奇葩)的公式，如n+4，-n+6，3n-2等，当结果值等于或小于0时直接被无视掉。当然最常用的还是奇数2n+1和偶数2n，因此有两个关键词odd和even。那它俩的差异在哪里呢？
例如div下有两个p，我们想将第二个p变成红色，用p:nth-child(2) { color: red; }和p:nth-of-type(2) { color: red; }都可以。但意义是不同的，前者表示该标签是p且是父标签里第二个孩子。后者表示父标签里第二个p。
现在把DOM结构变一下：div下依次有一个a，两个p。我们想将第二个p成红色，用p:nth-child(2) { color: red; }就不对了，会将第一个p(因为该标签是p且是父元素的第二个孩子)设成红色。用p:nth-of-type(2) { color: red; }才能将第二个p设成红色。
:first-of-type，:last-of-type同理可知就是父标签里第一个/最后一个某类型的孩子。等同于:nth-of-type(1)，:nth-last-of-type(1)。
:only-child父标签里仅有一个孩子。
:only-of-type父标签里唯一一个该类型的孩子。有什么用呢？例如当div里只有一张img时不浮动。当div里有多张img时，让它们从左至右依次浮动显示。你可以用div > img:only-of-type {…}来控制当div里只有一张图片和不止一张图片时采用不同的布局
:root匹配根元素，HTML中根元素始终是html，等同于基本选择器html
:empty表示当元素里面什么都没有的时候(包括空格、标签内换行)应用相关样式，常用于高亮提示用户搜索的结果为空。例如.xx:empty { background-color: red; }，div里无内容时背景色成红色。div里有内容时无背景色。但要注意伪元素不算内容，如.xx::after { content: 'hello'; }，此时div里显示字但背景色仍旧是红色。想想也知道::before，::after是伪元素，不是真实元素，因此不会影响:empty判断。而且因为伪元素不在DOM树内，你无法取得::before, ::after伪元素生成的content。
否定伪类选择器：:not，例如不hover时显示某效果li:not(:hover)。
伪类结合起来用能发挥更强大的作用。例如常见的渐进式需求，当列表项少于5项时用显示预览行文字，当列表项多于5项时用不显示预览行文字。这样条目少时，增加预览行文字便于用户预览，且让页面不显得非常空。条目多时，不显示预览行，让用户更多地关注条目名，便于用户选取。你如何处理呢？
先无脑对li应用上显示预览行的式样。然后用li:nth-child(5)，可惜它只能选中第5项，而我们想要的是当数量>=5时，所有li都应用隐藏预览行文字的式样。就算改成li:nth-child(5) ~ li也不对，它将第5个及之后的li应用上了新式样，前4个仍旧是旧的式样，等同于li:nth-child(n+5)。由于没有“回头看”的方式，你可能放弃CSS而用JS来处理。
其实CSS是有技巧能实现“回头看”的。当列表项数量为5时是临界点。因此当数量正好为5时，取第1项，再选中第1项之后的所有项即可：
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(5) ~ li {
...
}
如果没明白，再解释一下上面的代码。第一行表示第一个元素是从后往前数的第5个元素。第二行是当数量逐渐增加到5时，选中从第一个元素之后的所有元素。
伪元素
用于定位文档中包含的文本，但无法在DOM树中定位。有::first-line，::first-letter，::before，::after，::selection(CSS3之前是一个冒号，CSS3后变成两个冒号，用于和伪类区分开)
::first-line，::first-letter分别是首行和首字母
::before，::after相当于在元素内部插入两个额外的标签，最适合也是最推荐的应用就是图形生成
::selection用于匹配选中的文本(注意Firefox下是::-moz-selection)。该伪元素只接受两个属性background和color
更多资源上：去转盘；或者加入我的QQ群一起讨论学习js，css等技术(QQ群：512245829)

一、CSS 伪元素用于向某些选择器设置特殊效果。

1、:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。


p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }


注释："first-line" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-line" 伪元素：

 

font （设置字体属性）
	
color  (设置文本颜色)
	
background
	
word-spacing （ 用于汉字，规定段落中的字间距是 25 像素：p{word-spacing:25px;} ）
	
letter-spacing   （用于字母，增加或减少字符间的空白，即字符间距）
	
text-decoration （修饰文本）
值
			
描述
		
none
			
默认。定义标准的文本。
		
underline
			
定义文本下的一条线。
		
overline
			
定义文本上的一条线。
		
line-through
			
定义穿过文本下的一条线。
		
blink
			
定义闪烁的文本。
		
inherit
			
规定应该从父元素继承 text-decoration 属性的值。
		
 

 

vertical-align （属性设置元素的垂直对齐方式）
	
text-transform （属性控制文本的大小写）
	
line-height
	
clear
2、:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式

 

注释："first-letter" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-letter" 伪元素：

 

font
	
color
	
background
	
margin
	
padding
	
border
	
text-decoration
	
vertical-align (仅当 float 为 none 时)
	
text-transform
	
line-height
	
float
	
clear
3、CSS2 - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1> 元素前面插入一幅图片：


h1:before
  {
  content:url(logo.gif);
  }


4、CSS2 - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片：


h1:after
  {
  content:url(logo.gif);
  }


二、伪元素消除浮动 

有这样一种情形：在一个容器（container）中，有两个浮动的子元素。

<div>

        <div style="float:left;width:45%;"></div>

        <div style="float:right;width:45%;"></div>

</div> 

 CSS语句中有一个:after伪选择符，就可以在父容器的尾部自动创建一个子元素。


.clearfix:after {

     content: "\0020";

     display: block;   （确保是独立区块）

     height: 0;

     clear: both;

}

.clearfix {

     zoom: 1;     （:after选择符IE 6不支持，添加一条IE 6的独有命令"zoom:1;"激活父元素的"hasLayout"属性，让父元素拥                              有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。）

}


 三、伪类


a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */