2.10 伪元素
除了伪类，CSS3还支持访问伪元素。伪元素可用于定位文档中包含的文本，但无法在文档树中定位。伪类一般反映无法在CSS中轻松或可靠地检测到的某个元素属性或状态；另一方面，伪元素表示DOM外部的某种文档结构。
伪元素其实在CSS中一直存在，大家平时看到的有“:first-line”、“:first-letter”、“:before”和“:after”。 CSS3中对伪元素进行了一定的调整，在以前的基础上增加一个冒号，也就相应的变成了“::first-letter”、“::first-line”、“::before”和“::after”，另外伪元素还增加了一个“::selection”。
或许大家会问，为什么要使用两个冒号？对于IE 6～8，仅支持单冒号表示法，而现代浏览器同时支持这两种表示法。另外一个区别是，双冒号与单冒号在CSS3中主要用来区分伪类和伪元素。到目前来说，这两种方式都是被浏览器接受的。接下来简单介绍一下伪类元素的作用。
2.10.1 伪元素::first-letter
“::first-letter”用来选择文本块的第一个字母，除非在同一行中包含一些其他元素。“::first-letter”通常用于给文本元素添加排版细节，例如下沉字母或首字母，下面的代码是如何使用“::first-letter”创建首字下沉。
p:first-child::first-letter {
float: left;
color: #903;
padding: 4px 8px 0 3px;
font:75px/60px Georgia;
}
效果如图2-48所示。
2.10.2 伪元素::first-line
“::first-line”的使用和“::first-letter”类似，也常用于文本排版方面，只不过“::first-line”用来匹配元素的第一行文本，可以应用一些特殊的样式，给文本添加一些细微的区别。“::first-line”将匹配block、inline-block、table-caption、table-cell等级别元素的第一行，来看一个简单的例子。
p:last-child::first-line {
font: italic 16px/18px Georgia;
color: #903;
}
上面的代码意味着最后一个段落的第一行文字显示为红色斜体，如图所示2-49所示。
2.10.3 伪元素::before和::after
对于“::before”和“::after”来说，大家并不多见，但“:before”和“:after”，或许不会陌生，因为清除浮动就使用这两个伪类。
“::before”和“::after”不是指存在于标记中的内容，而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。
要为伪元素生成内容，还需要配合content属性。例如，假设在页面上所有外部链接之后的括号中附加它们所指向的URL，无须将URL硬编码到标记中，可以结合使用一个属性选择器和“::after”伪元素。
a[herf^=http]::after {
content:"(" attr(herf) ")";
}
如今在CSS3中使用“::before”和“::after”越来越多见，例如给链接添加ICON的效果。Font Awesome站点制作的ICON就使用伪元素“::before”和“::after”，下面截取部分代码。
/* Font Awesome styles
------------------------------------------------------- */
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
a [class^="icon-"],
a [class*=" icon-"] {
display: inline-block;
text-decoration: inherit;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: middle;
font-size: 1.3333333333333333em;
}
.btn [class^="icon-"],
.nav-tabs [class^="icon-"],
.btn [class*=" icon-"],
.nav-tabs [class*=" icon-"] {
/* keeps button heights with and without icons the same */
line-height: .9em;
}
li [class^="icon-"],
li [class*=" icon-"] {
display: inline-block;
width: 1.25em;
text-align: center;
}
li .icon-large:before,
li .icon-large:before {
/* 1.5 increased font size for icon-large * 1.25 width */
width: 1.875em;
}
ul.icons {
list-style-type: none;
margin-left: 2em;
text-indent: -0.8em;
}
ul.icons li [class^="icon-"],
ul.icons li [class*=" icon-"] {
width: .8em;
}
ul.icons li .icon-large:before,
ul.icons li .icon-large:before {
/* 1.5 increased font size for icon-large * 1.25 width */
vertical-align: initial;
}
.icon-bullhorn::before {
content: "\f0a1";
}
.icon-beaker::before {
content: "\f0c3";
}
效果如图2-50所示。
图2-50 Font Awesome制作ICON
注
意 图2-50效果还需要配合CSS3的@font-face特性，后续章节会进行详细介绍。
2.10.4 伪元素::selection
“::selection”是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，如图2-51所示。
图2-51 浏览器默认突出文本的效果
有的设计需要一个与众不同的效果，此时“::selection”就非常实用。不过浏览器对“::selection”支持并不完美，在整个IE 系列中仅有IE 9支持，Firefox也需要加上其私有属性“-moz”。不过值得庆幸的是，Webkit内核浏览器支持，其正确的使用如下。
/*Webkit,Opera9.5+,IE 9+*/
::selection {
background: 颜色值;
color: 颜色值;
}
/*Mozilla Firefox*/
::-moz-selection {
background: 颜色值;
color: 颜色值;
}
一起来看看W3cplus12上的使用。
::selection {
background: red;
color: #fff;
}
::-moz-selection {
background: red;
color: #fff;
}
此时选择文本时，背景是大红色，前景色是白色，如图2-52所示。
图2-52 ::selection伪元素突出文本效果
注意 伪元素::selection仅接受两个属性，一个是background，另一个是color。
