定义 伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection
用法 :first-letter(ie6-浏览器不支持) 指定一个元素第一个字母的样式
[注意1]所有前导标点符号应与第一个字母一同应用该样式
[注意2]只能与块级元素关联
div:first-letter{color: red;}
:first-line(ie6-浏览器不支持) 设置元素中第一行文本的样式
[注意]只能与块级元素关联
div:first-line{color: red;}
:before(ie7-浏览器不支持) 在元素内容的最开始插入生成内容
[注意]默认这个伪元素是行内元素,且继承元素可继承的属性
div:before{content:前缀}
:after(ie7-浏览器不支持) 在元素内容的最后插入生成内容
[注意]默认这个伪元素是行内元素,且继承元素可继承的属性
div:after{content:后缀}
::selection(ie8-浏览器不支持) 匹配被用户选择的部分
[注意1]firefox浏览器需要添加-moz-前缀
[注意2]只支持双冒号写法
[注意3]只支持颜色和背景颜色两个样式
div::selection{color: red;}
重点 【content属性】 content属性应用于before和after伪元素
content:normal;(默认)content:||attr()
【1】里面的内容会原样显示，即使包含某种标记也不例外。
[注意1]如果希望生成内容中有一个换行，则需要使用\a
[注意2]若是一个很长的串，需要它拆分成多行则需要用\对换行符转义
div:before{ content: 第一段\ 第二段;}div:after{ content:\a后缀;}
【2】
div:before{ content: url(arrow.gif);}
【3】attr()
div:before{ content: attr(data-before);}
【quotes属性】
管理引号
前单引号 -> \2018后单引号 -> \2018前双引号 -> \201c后双引号 -> \201d
quotes:'201c' '201d' '2018' '2019';//第一个值定义最外层开始引号(open-quote),第二个串定义最外层结束引号(close-quote)，第三个值定义次外层开始引号，第四个值定义次外层结束引号，第五个值定义次次外层开始引号，第六个值定义次次外层结束引号……
【4】open-quote|close-quote
最外层 次外层 最里层
【5】counter
关于counter属性值，详见深入理解css计数器
demo 首字下沉
图片叠加效果