CSS 伪元素被用来将特殊的效果添加到某些选择器。

语法：

伪元素的语法：

selector:pseudo-element {property: value}

CSS类也可以与伪元素配合使用：

selector.class:pseudo-element {property: value}

:first-line 伪元素

"first-line"伪元素被用来向某个选择器中的文字的首行添加特殊款式：

p {font-size: 12pt}p:first-line {color: #0000FF; font-variant: small-caps}<p>Some text that ends up on two or more lines</p>

在上面的例子中，浏览器显示依据first-line伪元素格式化的第一行。浏览器是依托浏览器窗口的尺寸来进行分行的。

提示：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 {font-size: 12pt}p:first-letter {font-size: 200%; float: left}<p>The first words of an article.</p>

输出的效果类似于：

___  |  he first   |  words of anarticle.

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (仅当float为none时)
• text-transform
• line-height
• float
• clear

伪元素和CSS类

伪元素可以与CSS类配合使用：

p.article:first-letter {color: #FF0000}<p class="article">文章中的一个段落。</p>

上面的例子会使所有class为article的段落的首字母变为红色。

多重伪元素

多个伪元素可以配合在一同使用：

p {font-size: 12pt;}p:first-letter {color: #FF0000; font-size: 24pt;}p:first-line {color: #0000FF;}<p>The first words of an article</p>

输出的效果类似于：

__  |  he first   |  words of anarticle.

在上面的例子中，段落的首字母将是字号为24pt的红色。首行的其余部分将会是蓝色，而段落的其余部分会是默认的颜色。

CSS2 - :before伪元素

before伪元素可被用于在某个元素之前插入某些内容。

下面的款式会在标题之前播放音频：

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

CSS2 - :after伪元素

after伪类可被用于在某个元素之后插入某些内容。

下面的款式会在标题之后播放音频：

h1:after{content: url(beep.wav)}