一、簡介

content屬性早在CSS2.1的時候就被引入了，可以使用:before以及:after偽元素生成內容。此特性目前已被大部分的瀏覽器支援：(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外，目前Opera 9.5+ 和 Safari 4已經支援所有元素的content屬性，而不僅僅是:before和:after偽元素。

在CSS 3 Generated Content工作草案中，content屬性添加了更多的特徵，例如：插入以及移除文件內容的能力，以建立腳註，結語，及段落註釋。但是目前還沒有瀏覽器支援content的擴充套件功能。

本文將展示content內容生成的基本使用，以及一些您可以應用的特別的技術。

二、最基本的 – 生成內容

content使用如下：

h2:before {
   content: "我是額外文字！";
}

此段樣式的作用是在每個h2標籤的前面新增文字“我是額外文字”。
您可以狠狠地點選這裡：content最基本使用Demo

content屬性的值除了使用文字值外，還可以使用標籤的一些屬性值，方法是attr()，參見如下程式碼：

a.content:after {
   content: attr(href);
}

<a class="content" href="http://www.zhangxinxu.com/">此標籤的href值是：</a>

結果如下截圖（截自Firefox3.6）：

對應a標籤內的文字值的最後添加了此標籤的href屬性的值。
您可以狠狠地點選這裡：標籤屬性值生成content內容Demo

注意：當使用attr()獲取標籤屬性名的時候，千萬不要新增引號!

您還可以使用計數器產生動態數字或運用url(/path/to/file)路徑插入圖片。要想獲得更多資訊，請繼續看下面的應用例項。

三、使用計數器建立號碼內容

如果您想插入一系列遞增的值，比如說“美女1，美女2，美女3，美女4……”，您就可以使用計數器在每個列表項的前面插入遞增的序號值。CSS程式碼如下：

ol {
   list-style-type:none;		
   counter-reset:sectioncounter;
}                      

ol li:before {
   content:"美女" counter(sectioncounter) "： "; 
   counter-increment:sectioncounter;
}

HTML程式碼如下：

<ol>
    <li><img src="mm1.jpg" width="128" height="96" /></li>
    <li><img src="mm3.jpg" width="128" height="96" /></li>
</ol>

結果如下圖（Firefox3.6下截圖）：

您可以狠狠地點選這裡：content產生遞增序號demo

說明：

1. <ol>標籤應用counter-reset屬性，<li>標籤應用counter-increment屬性，值均為sectioncounter，再配合content屬性，以及counter計數器就可以實現遞增的效果了。
2. 如果您指定了元素display:none，則content下的計數器不會產生遞增值。
3. 當然，如果瀏覽器不支援此方法，那麼就不會有數字出現，您使用firebug或是之類的工具檢視真實的HTML時不會看到產生的數值，不要有疑惑，content屬性動態生成的內容是純粹的裝飾而已，虛假的表象。
4. 如果您對CSS計數器感興趣，想深入瞭解，可以參見David Storey一篇優秀的文章：Automatic numbering with CSS Counters。

四、為多語言內容插入正確的引號

不同的語言使用不同的引號字元。比如英文的引號就是""，而中文引號就是“”。使用content可以使得不同的語言使用對應的一些字元。例如，我們需要對下面的些文字新增其對應語言的引號，該怎麼辦呢？

<p lang="en"><q>It’s only work if somebody makes you do it.</q></p>
<p lang="no"><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p>
<p lang="ch"><q>歡迎來到上海，歡迎參觀世博會！</q></p>

我們不妨試試下面的程式碼：

/* 為不同語言指定引號的表現 */
:lang(en) > q {quotes:'"' '"';}
:lang(no) > q {quotes:"«" "»";}
:lang(ch) > q {quotes:"“" "”";}

/* 在q標籤的前後插入引號 */
q:before {content:open-quote;}
q:after  {content:close-quote;}

結果如下圖所示：

您可以狠狠地點選這裡：content生成對應語言字元demo

此技術可以應用於各類元素，而不僅僅是q標籤，另外，Safari 3以及IE7（以及以下）是不支援此技術的。

五、用圖片替換文字

關於圖片替換技術，您可以參見這裡：several image replacement techniques，裡面提供了幾種方法。而這裡展示的則是另外不同的用圖片替換方法，使用的是content。

您可以參見下面的程式碼：

div.logo {
   content:url(logo.png);
}

這種圖片替換技術的優點在於文字內容確實被替換了。因此，您沒有必要設定高寬為圖片的顯示創造空間，或是使用text-indent或是padding隱藏最初的文字。

然而，就目前而言，還是有不少需要注意的：
1. 你不能對圖片進行重複或平鋪，或是使用image sprite。
2. 目前僅在Opera 9.5+ 和 Safari 4+瀏覽器下起作用，因為這些瀏覽器支援所有元素的content方法，而不僅僅侷限於:after或是:before。
替換的圖片無法應用alt屬性，所以一些特殊的使用螢幕閱讀器的使用者可能無法理解您替換的圖片的含義。

六、顯示相對應的連結圖示

指的是針對不同的連結型別，在連結的後面顯示對應連結型別的圖示，例如，連結的物件是一個圖片，則顯示圖片的小圖示，如果連結物件是視訊，則顯示視訊小圖示，如果連結就是個URL網頁連結，則顯示連結的小圖示。您可以參見下面的程式碼：

p a[href $=".pdf"]:after {
    content:url(../image/icon_pdf.png);
}
p a[rel = "external"]:after {
    content:url(../image/icon_link.png);
}

<p>您可以檢視此PDF檔案：<a href="/sample.pdf">web站點的效能優化.pdf</a>，或是線上檢視，<a href="http://www.zhangxinxu.com/wordpress/" rel="external">點選這裡</a>。</p>

結果如下圖所示：

您可以狠狠地點選這裡：CSS content顯示連結圖示demo

七、使用屬性值作為content內容

使用屬性值當作content內容指的是將標籤的title, src, href, alt等值當作內容顯示在標籤的內部，這是很強大的一個功能。由於此技術目前遠未到普及的程度，所以這裡簡單介紹一下，您可以參見下面的兩小段樣式程式碼：

a:after {
   content: "(" attr(href) ")";
}

abbr:after {
   content: "(" attr(title) ")";
}

這裡理解和使用都不難，關鍵就是CSS3 的attr()方法。

前瞻：強大的CSS3 attr()方法。
CSS3 Values and Units草案擴充套件了attr()表示式的範圍，除了返回字串，還可以返回諸如CSS colors, CSS integer, length, angle, time, frequency以及其他一些單元。

通過使用自定義的data屬性，可以實現一些非常強大的效果，諸如簡單圖表圖形的渲染，動畫效果的實現。例如我們可以設定根據元素的attribute值設定background-color的顏色值，這在顯示線上調色盤上會大放異彩；我們還可以根據attribute值指定元素的大小，就像定義圖表每個條形的長度一樣。總之，attr()的潛力驚人。

八、最後一點嘮叨

相信本文對您理解content屬性會有不少的幫助。只是在中國，在IE6依舊盛行的中國，由於IE6/7對content的不支援，限制了這一強大功能的流行，但我相信，在未來幾年內，會迎來它的春天的。隨著對CSS3的逐步深入的瞭解，會發現，CSS3的潛力與強大真是超乎想象。我可以預見再未來幾年，會有類似於寒武紀爆發的CSS新技術湧現出來，那時，可真是前端開始走向興盛的時代。

參考文章：
1. CSS generated content techniques