CSS偽元素

first-lin first-lin article.fon

語法：

偽元素的語法：
選擇器:偽元素{屬性:值;}

: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 屬性color 屬性background 屬性word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear

: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 屬性color 屬性background 屬性margin 屬性padding 屬性border 屬性text-decorationvertical-align (僅當float為none時)text-transformline-heightfloatclear

偽元素和 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);}