原始網址：http://www.w3schools.com/css/css_pseudo_elements.asp
翻譯：
CSS 僞元素
什麼是僞元素？
CSS 僞元素用以式樣化元素的特定部分。
例如，它有以下使用：
- 式樣化首字母、行或元素
- 在元素內容的前、後插入新內容
語法
僞元素的語法：
selector::pseudo-element {
property:value;
}| 注意雙冒號符號 - ::first-line VS :first-line 在 CSS3 中，對僞元素使用雙冒號替代單冒號符號，這是 W3C 用以區別僞類和僞元素的一次嘗試。 在 CSS2 和 CSS1 中，對僞類和僞元素均使用單冒號語法。 根據向後兼容原則，在 CSS2 和 CSS1 中使用單冒號語法是可行的。 |
The ::first-line Pseudo-element
::first-line 僞元素用以對文本的首行進行特殊式樣化。
下列示例是格式化所有 <p> 元素內的文本首行：
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>
You can use the ::first-line pseudo-element to add a special
effect to the first line of a text. Some more text. And even more, and
more, and more, and more, and more, and more, and more, and more, and
more, and more, and more, and more.
</p>
</body>
</html>注意：::first-line 僞元素只能被應用於塊級元素。
以下屬性應用於 ::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 僞元素用以對文本的首字母添加特殊式樣。
以下示例是格式化所有 <p> 元素內的文本首字母：
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special
effect to the first character of a text!</p>
</body>
</html>注意：::first-letter 僞元素只能被應用於塊級元素。
以下屬性應用於 ::first-letter 僞元素：
- font 屬性
- color 屬性
- background 屬性
- margin 屬性
- padding 屬性
- border 屬性
- text-decoration
- vertical-align（只在不浮動的情況下）
- text-transform
- line-height
- float
- clear
Pseudo-elements and CSS Classes
僞元素可以和 CSS 類結合使用：
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>上面的示例將以紅色、大號字體顯示以類值爲 intro 的段落的首字母。
Multiple Pseudo-elements
多個僞元素也可以結合使用。
在以下示例中，段落首字母將以紅色、大號字體顯示。首行剩餘部分字母將以藍色、小型大寫字母的式樣顯示。段落剩餘部分將以默認字體號和顏色顯示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>
You can combine the ::first-letter and ::first-line
pseudo-elements to add a special effect to the first letter and the
first line of a text!
You can combine the ::first-letter and ::first-line
pseudo-elements to add a special effect to the first letter and the
first line of a text!
</p>
</body>
</html>CSS - The ::before Pseudo-element
::before 僞元素用以在元素內容之前插入相應內容。
以下示例是在每一個 <h1> 元素內容之前插入圖片：
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(http://www.w3schools.com/css/smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>CSS - The ::after Pseudo-element
::after 僞元素用以在元素內容之後插入相應內容。
以下示例是在每一個 <h1> 元素內容之後插入圖片：
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(http://www.w3schools.com/css/smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>CSS - The ::selection Pseudo-element
::selection 僞元素用以匹配被用戶選擇的元素部分。
以下 CSS 屬性可被應用於 ::selection：
color，background，cursor 和 outline
下列示例使被選擇的文本以黃色背景、紅色字體顯示：
<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Code for Firefox */
color: red;
background: yellow;
}
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
<p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>
<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>
</body>
</html>