content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。該屬性用於定義元素之前或之後放置的生成內容。默認地，這往往是行內內容，不過該內容創建的框類型可以用屬性 display 控制。

應用：

（1） 清楚浮動

.clearfix:after {

content:"."; //這裏利用到了content屬性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix {*zoom:1;}

after偽元素通過 content 在元素的後面生成了內容為一個點的塊級素，再利用clear:both清除浮動。

（2）插入文本

div:before {

content: "我是content添加的文字！";

}

在div元素開始插入“我是content添加的文字！”文本。

（3） 插入元素屬性

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

a.content:after {

content: attr(href);

}

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

（4） 使用計數器創建號碼內容

ul {

list-style-type:none;

counter-reset:sectioncounter;

}

ul li:before {

content:"美女" counter(sectioncounter) "： ";

counter-increment:sectioncounter;

}

css計數器是通過設置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合after / before 偽類實現。

（5） 插入符號

不同的語言使用不同的引號字符。比如英文的引號就是""，而中文引號就是“”。使用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;}

（6）圖片代替文字

div.logo {

content:url(logo.png);

}

圖片替換技術的優點在於文字內容確實被替換了。因此，您沒有必要設定高寬為圖片的顯示創造空間，或是使用text-indent或是padding隱藏最初的文字。你不能對圖片進行重復或平鋪，或是使用image sprite。替換的圖片無法應用alt屬性，所以一些特殊的使用屏幕閱讀器的用戶可能無法理解您替換的圖片的含義。

也可以使用:after或:before插入圖片

css之content