css之content

標籤：應用   list   計數器   css   block   hidden   技術   通過   reset   

     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