偽元素的語法：
selector:pseudo-element {
property:value;
}
標籤：偽元素{性質:值;}
CSS 類也可以與偽元素配合使用：
selector.class:pseudo-element {
property:value;
}
標籤 類：偽元素{性質:值;}
基本介紹
- 中文名：CSS偽元素
- 外文名：selector:pseudo-element {property:value;}
- 翻譯：標籤：偽元素{性質:值;}
- 配合使用：CSS 類
- 用於：向某個選擇器中的文字的首行
- 作用：添加特殊樣式
定義,分類,多重偽元素,
定義
"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 屬性color 屬性background 屬性word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear
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 屬性color 屬性background 屬性margin 屬性padding 屬性border 屬性text-decorationvertical-align (僅當float為none時)text-transformline-heightfloatclear
分類
偽元素可以與 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 偽元素可用於在某個元素之前插入某些內容。
:before 偽元素可以加入任意元素可以是文字、視頻、圖片等
下面的樣式會在標題之前播放音頻：
h1:before{ content:url(beep.wav);}
下面的樣式會在標題之前加入content這個字元串，要注意 content需要用""引號包含起來.
h1:before{content:"content";}
下面的樣式會在h1標題前面加入一張圖片.
h1:before{content:url(xxx.jpg);}
CSS2 - :after 偽元素
after 偽類可用於在某個元素之後插入某些內容。
下面的樣式會在標題之後播放音頻：
h1:after{ content:url(beep.wav);}
