CSS pseudo-elements are used to add special effects to some selectors.
CSS的伪元素可用来给一些选择器加上特殊的效果。

实例

Make the first letter special
This example demonstrates how to add a special effect to the first letter of a text.
如何给文字的首个字加上特殊效果

Make the first line special
This example demonstrates how to add a special effect to the first line of a text.
如何给文字的第一行加上特殊效果

语法

The syntax of pseudo-elements:
伪元素的语法为：

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:
CSS类也可以使用伪元素:

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

The :first-line Pseudo-element
:first-line伪元素

The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector:
一般这个伪元素使用在为文字首行添加特殊样式上：

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>

The output could be something like this:
输出的样子就是这样：

In the example above the browser displays the first line formatted according to the "first-line" pseudo element. Where the browser breaks the line depends on the size of the browser window.
上面的例子中浏览器就会依据"first-line"伪元素将第一行格式化，浏览器的分行是根据它的窗口大小来定的。

Note: The "first-line" pseudo-element can only be used with block-level elements.
注意："first-line"伪元素只可以通过block-level元素来使用

Note: The following properties apply to the "first-line" pseudo-element: 
以下属性适用"first-line"伪元素：

• font 属性
• color 属性
• background 属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

The :first-letter Pseudo-element
:first-letter伪元素

The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector:
这个伪元素用在要为文字的第一字母添加特殊样式的时候：

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}

<p>The first words of an article.</p>

The output could be something like this:
输出就成这个样子：

Note: The "first-letter" pseudo-element can only be used with block-level elements.
注意：和"first-line"伪属性一样，"first-letter"也只有通过block-level元素才能使用

Note: The following properties apply to the "first-letter" pseudo- element: 
注意：以下属性适用于 "first-letter"伪元素：

• font 属性
• color 属性
• background 属性
• margin 属性
• padding 属性
• border 属性
• text-decoration
• vertical-align (only if 'float' is 'none')
• text-transform
• line-height
• float
• clear

Pseudo-elements and CSS Classes
伪元素和CSS类

Pseudo-elements can be combined with CSS classes: 
伪元素可以和CSS类混合使用：

p.article:first-letter {color: #FF0000}

<p class="article">A paragraph in an article</p>

The example above will make the first letter of all paragraphs with class="article" red.
以上的例子会让所有class="article"的段落首字母为红色。

Multiple Pseudo-elements
多重伪元素

Several pseudo-elements can be combined:
几个伪元素可以混合使用:

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}

<p>The first words of an article</p>

The output could be something like this:
输出就成这样：

In the example above the first letter of the paragraph will be red with a font size of 24pt. The rest of the first line would be blue while the rest of the paragraph would be the default color.
上面的例子段落的首个字母会成为大小为24pt的红色字体，余下首行的部分会变为兰色，再余下的就是默认的颜色了。

CSS2 - The :before Pseudo-element
CSS2中的:before伪元素

The ":before" pseudo-element can be used to insert some content before an element.
":before"伪元素可以用来在一元素前插入一些内容

The style below will play a sound before each occurrence of a header one element.
下面的样式就会在每个标题元素前播放一段声音

CSS2 - The :after Pseudo-element
CSS2中的:after 伪元素

The ":after" pseudo-element can be used to insert some content after an element.
":after"伪元素用在给一元素后插入一些内容

The style below will play a sound after each occurrence of a header one element.
下面的样式就会在每个标题元素后播放一段声音

Pseudo-elements
伪元素

支持的浏览器: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C：下表中“W3C”纵栏中的数字指明了支持该属性的CSS版本（CSS1或CSS2）。

CSS 伪类 CSS2 Media类型

评论 (0) All