基礎知識--:before僞元素和:after僞元素

http://book.51cto.com/art/201108/285688.htm

3.7  替換指定位置

你們都知道before和after是前、後的意思。可是奇怪的是，CSS中的:before僞元素和:after僞元素是爲源文檔中不存在的內容設置樣式的。

沒有內容怎麼設置樣式呢？別急！它們有一個content屬性，一塊兒使用就能夠爲某個選擇器前、後的內容設置樣式了。

下面就來了解一下:before僞元素和:after僞元素的用法。

視頻教學：光盤/視頻/3/3.7  替換指定位置.avi                   長度：7分鐘

3.7.1  基礎知識--:before僞元素和:after僞元素

:before用來和content屬性一塊兒使用，設置在對象以前(依據對象樹的邏輯結構)顯示的內容，語法格式以下：

Selector : before { sRules }

例如：

q:before {
 content: open-quote;
 color: red
 }

:after用來和content屬性一塊兒使用，設置在對象以後(依據對象樹的邏輯結構)顯示的內容，語法格式以下：

Selector : after { sRules }

例如：

body:after {
   content: "The End";
   display: block;
   margin-top: 2em;
   text-align: center;
 }

從語句中能夠看到:before和:after都須要與content屬性一塊兒使用。在表3-1中列出了經常使用content參數名稱及說明。

表3-1  經常使用content參數表

參數名稱	說  明
attr(alt) :	使用alt特性的文字
counter(name)	使用已命名的計數器
counter(name, list-style-type)	使用已命名的計數器並聽從 指定的list-style-type屬性
counters(name, string)	使用全部已命名的計數器
counters(name, string, list-style-type)	使用全部已命名的計數器並遵 從指定的list-style-type屬性
no-close-quote	不插入quotes屬性的後元素。 但增長其嵌套級
no-open-quote	不插入quotes屬性的前元素。 但減小其嵌套級別
close-quote	插入quotes屬性的後元素
open-quote	插入quotes屬性的前元素
string	使用引號括起的字符串
url	使用指定的絕對或相對地址

假設，有一個HTML頁面中包含了以下的代碼：

<style type="text/css">
h1:before{ content: "標題：";   }
p{color:blue}
</style>
<h1>花開已遠</h1>
<p>你所去的地方，是否是沒有寒冷，也沒有憂傷。</p>

運行後會發現，在"花開已遠"文字以前多出了"標題："文字，效果如圖3-16所示。

圖3-16  實例運行效果