CSS2和CSS2.1包含一個(gè)稱(chēng)為生成內容（generated content）的新特性。這是指由瀏覽器創(chuàng )建的內容，而不是由標志或內容來(lái)表示。

在網(wǎng)頁(yè)設計中，列表標志就是生成內容。在列表項的標記中，沒(méi)有任何部分直接表示這些標志，而且作為創(chuàng )作人員，你不必在文檔內容中寫(xiě)上標志。瀏覽器會(huì )自動(dòng)生成合適的標志。對于無(wú)序列表，標志是某種圓點(diǎn)，如空心圓、實(shí)心圓或方塊。對于有序列表，標志則是一個(gè)計數器，對每個(gè)后續列表項不斷增1。

要理解如何影響列表標志，以及如何定制有序列表（或任何元素?。┑挠嫈?，必須先了解更基本的生成內容。

插入生成內容

在網(wǎng)頁(yè)設計時(shí)為了向文檔中插入生成內容，可以使用：before和：after偽元素。這些偽元素會(huì )根據content屬性把生成內容放在一個(gè)元素內容的前面或后面（content屬性見(jiàn)下一節的介紹）。

例如，你可能希望所有超鏈接前面增加前綴文本“(link)”加以標志，從而在打印時(shí)更明顯。

a[href]:before (content:"(link)";}

注意，生成內容和元素內容之間沒(méi)有空格。這是因為前例中content的值未包含空格?？梢詫⑦@個(gè)聲明修改如下，確保生成內容和實(shí)陳內容之間有一個(gè)空格：

a[href]:before {content:"(link)";}

這個(gè)差別很小，但很重要。

采用類(lèi)似方式，還可以在指向PDF文檔的鏈接最后插入一個(gè)小圖標。為此，規則可能如下：

a.pdf-doc: after {content: url (pdf-doc-icon.gif)}

假設希望進(jìn)一步設置這些鏈接的樣式，再增加一個(gè)邊框?？梢岳靡韵碌诙€(gè)規則完成：

a.pdf-doc {border: 1px solid gray;}

a.pdf-doc: after {content: url (pdf-doc-icon.gif)}

假設希望進(jìn)一步設置這些鏈接的樣式，再增加一個(gè)邊框?？梢岳靡韵碌诙€(gè)規則完成：

a.pdf-doc {border: 1px solid gray;}

你可能認為定位能解決問(wèn)題，不過(guò)CSS2和CSS2.1明確地禁止浮動(dòng)或定位:before和:after內容，還禁止使用列表樣式屬性以及表屬性。另外還有以下限制：

如果：before或：after選擇器的主體是塊級元素，則display屬性只接受值none、inline、block和marker。其他值都處理為block。

如果:before或:after選擇器的主體是一個(gè)行內元素，屬性display只能接受值none和inline。所有其他值都處理為inline.

例如，考慮以下規則：

em:after {content:"(!)"; display: block;}

由于em是一個(gè)行內元素，生成內容不能是塊級內容。因此，值block重置為inline。不過(guò)，在下一個(gè)例子中，生成內容被置為塊級內容，因為目標元素就是塊級元素：

h1:before (content:"New Section"; display: block; color: gray;}

生成內容是網(wǎng)頁(yè)建設中有一個(gè)很有意思的方面，它由與之關(guān)聯(lián)的元素繼承值。因此，給定以下規則，生成文本將是綠色，與段落內容的顏色相同：

p {Color: green;}

p:before {content:":::";}

如果希望生成文本是紫色，只需一個(gè)簡(jiǎn)單的聲明：

p:before (content:":::"; color: purple;}

當然，這種值繼承只適用于可繼承的屬性。特別指出這一點(diǎn)是因為這會(huì )影響達到某些效果的方式。請考慮以下規則：

h1 {border-top: 3px solid black; padding-top: 0.25em;}

h1:before (content:"New Section"; display: block; color: gray; border-bottom: 1px dotted black; margin-bottom: 0.5em;}

生成內容（作為塊級內容）的下外邊距將元素的實(shí)際內容向下推了O.5em。不論怎樣講，此例中生成內容的效果就是把hi元素分成了兩部分：生成內容框和實(shí)際內容框。這是因為生成內容聲明為display: block。

注意邊框如何放置，還要注意上內邊距仍保留。生成內容的下外邊距也保留，不過(guò)由于生成內容現在是行內內容，而行內元素的外邊距不影響行高，所以視覺(jué)上外邊距不起作用。