CSS2.1 內容樣式(Content)與滑鼠游標(Cursor)
content
| 屬性樣式 | 設定值 |
| content 內容樣式 |
normal none content: "字串" content: attr(屬性); (追加屬性值) content: url('路徑與檔名') (追加圖片或影音資料。) open-quote (利用 quotes 屬性追加引號,起始。) close-quote (利用 quotes 屬性追加引號,結束。) no-open-quote (利用 quotes 屬性不追加引號,起始。) no-close-quote (利用 quotes 屬性不追加引號,結束。) |
| 預設值:normal 適用於::before 與 :after 擬元素 繼承性:無 |
|
這個樣式是用來追加內容到元素的前面或後面(IE6 不支援)。
<p class="MyStyle1">山不在高,有仙則名。</p>
p.MyStyle1:before {content: "【追加在前頭】";}
下面的圖是上述範例的結果:

<p class="MyStyle2" title="陋室銘">山不在高,有仙則名。</p>
p.MyStyle2:before {content: "【" attr(title) "】";}
下面的圖是上述範例的結果:

quotes
| 屬性樣式 | 設定值 |
| quotes 引號樣式 |
none "字串" "字串" |
| 預設值:視使用者瀏覽器而定 適用於:全部 繼承性:有 |
|
這個樣式是用來設定引號(IE6 不支援)。
<q class="MyStyle3">山不在高,有仙則名。</q>
q.MyStyle3 {quotes: "\201E" "\201C";}
下面的圖是上述範例的結果:

| 字元 | ISO 10646 code(hex) | 字元 | ISO 10646 code(hex) | 字元 | ISO 10646 code(hex) |
| " | 0022 | ' | 0027 | ‹ | 2039 |
| › | 203A | « | 00AB | » | 00BB |
| ‘ | 2018 | ’ | 2019 | “ | 201C |
| ” | 201D | „ | 201E |
counter-increment, counter-reset
| 屬性樣式 | 設定值 |
| counter-increment 增加(減少)編號計數器的值 |
[計數器名稱 整數] (整數可為正整數或負整數,若未指定數值的話,其預設的值為 1。) |
| counter-reset 重設編號計數器的值 |
[計數器名稱 整數] (整數可為正整數或負整數,若未指定數值的話,其預設的值為 0。) |
| 預設值:視使用者瀏覽器而定 適用於:全部 繼承性:無 |
|
這兩個樣式是用來增加(減少)、重設編號計數器的值(IE6、Firefox2 不支援)。
<h1></h1> <h2></h2> <h2></h2> <h1></h1> <h2></h2> <h2></h2> <h2></h2> <h2></h2>
h1:before {
counter-increment: myChapter;
content: "第" counter(myChapter) "章";
counter-reset: mySection;
}
h2:before {
content: "第" counter(myChapter) "章 第" counter(mySection) "節";
counter-increment: mySection;
}
下面的圖是上述範例的結果:

cursor
| 屬性樣式 | 設定值 |
| cursor 滑鼠游標 |
auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help |
| 預設值:auto 適用於:全部 繼承性:有 |
|
這個樣式是用來當滑鼠游標指到某個元素時,游標應使用的游標圖示。
div.MyStyle {
cursor: wait;
}