伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection
:first-letter
指定一个元素第一个字母的样式
注意1：所有前导标点符号应与第一个字母一同应用该样式
注意2：只能与块级元素关联
注意3：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-letter中存在连接符的原因
:first-line
设置元素中第一行文本的样式
注意1：只能与块级元素关联
注意2：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-line中存在连接符的原因
:before(IE7-浏览器不支持)
在元素内容的最开始插入生成内容
注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用
:after(IE7-浏览器不支持)
在元素内容的最后插入生成内容
注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用
::selection(IE8-浏览器不支持)
匹配被用户选择的部分
注意1：firefox浏览器需要添加-moz-前缀
注意2：只支持双冒号写法
注意3：只支持颜色和背景颜色两个样式
下面是伪元素的速查表
【content属性】
content属性应用于before和after伪元素
【1】 <string>里面的内容会原样显示，即使包含某种标记也不例外。
注意1：如果希望生成内容中有一个换行，则需要使用\A
注意2：若是一个很长的串，需要它拆分成多行则需要用\对换行符转义
【2】 <uri>
【3】attr( <identifier>)
<补充>【quotes属性】
管理引号
【4】open-quote|close-quote
【5】counter
首字下沉
钉子效果
图片叠加效果
CSS伪元素（pseudoelements）不是DOM元素，因此你无法直接选择到它们。
假设有如下HTML代码：
<div
class="techbrood"
id="td_pseudo">techbrood
introduction</div>
和CSS代码：
.techbrood:before
{
width:
0
}
现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%，
有两个方法，一个是添加新的样式：
$('head').append("<style>.techbrood::before{
width:100%
}</style>")
（注意该方法将影响所有的class为techbrood的元素）
另外一个方法是为该元素添加新类，并通过设置新类的属性来达到改变伪元素属性的效果：
.techbrood.change:before{
width:
100%
}
jQuery代码：
$('#td_pseudo').addClass("change")
首先，此类伪选择器只针对与 表单元素的单选（radio）多选（checkbox）起作用。调试方法：
1 在页面中打开开发者工具（本例以chrome浏览器为例）,
2.选则选中的checkbox货radio.
3.在右侧的style面板中点击new Style rule 输入
input[type="checkbox"]:checked {
margin: 30px
}
即可以看到效果。
4.勾掉选中状态则margin的效果消失。
