content屬性非繼承屬性，使用「元素:before」、「元素:after」虛擬選擇器指定元素的之前或之後所要加入的內容(文字、圖像等)。雖是便利的功能，但是IE完全沒有對應。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| content | 文字列 URI attr(X) count open-quote close-quote no-open-quote no-close-quote inherit |
→加入("")、('')括弧內的文字列(Default值為空文字) → 加入圖像等的所在位置URI → 加入X(指定的屬性，通常為title)的屬性值 → 加入counter屬性值 → 元素前加入quotes屬性值 → 元素後加入quotes屬性值 → quotes屬性值往下一階層指定 → quotes屬性值往上一階層指定 → 強制繼承上層元素的屬性值 |
abbr:after { content :"(" attr(title) ")"; }
...
<p>web標準樣式設定<abbr title="Cascading Style Sheets">CSS</abbr></p>
web標準樣式設定CSS*1)
counter-increment屬性非繼承屬性，增加content屬性指定的counter值時使用。counter值的指定方式，在counter()內加入名稱、list-style-type、區隔文字(例".")等。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| counter-increment | all | count名稱 count名稱 整數值 none(default值) inherit |
→ 指定的count名稱自動加1下去 → 指定的整數值加記下去 → 不加計 → 強制繼承上層元素的屬性值 |
ol { counter-reset:List; list-style:none;}
li:before{ content: counters(List, ".") ". ";counter-increment: List; }
...
<ol><li>List</li><li>List<ol><li>List</li><li>List</li></ol></li>
<li>List</li></ol>
counter-reset屬性非繼承屬性，初期化content屬性指定的counter值時使用。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| counter-reset | all | count名稱 count名稱 整數值 none(default值) inherit |
→ 指定的count名稱自動歸"0" → 初期化至指定的整數值 → 不進行初期化 → 強制繼承上層元素的屬性值 |
ol { counter-reset:List; list-style:none;}
li:before{ content: counters(List, ".") ". ";counter-increment: List; }
...
<ol><li>List</li><li>List<ol><li>List</li><li>List</li></ol></li>
<li>List</li></ol>
quotes屬性非繼承屬性，使用「元素:before」、「元素:after」虛擬選擇器指定元素的之前或之後所要加入的引用符號。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| quotes | 文字列 none inherit |
→ 加入("")、('')括弧內的文字列(Default值為空文字) → 不加入引用符號 → 強制繼承上層元素的屬性值 |
q { quotes : "“" "”" "‘" "’" ; color : red ; }
q:before { content: open-quote; color : red ; }
q:after { content: close-quote; color : red ; }
...
<p>接下來的文字列要加入引用符號<q>第一層的前面加入(“ )
<q>第二層的前後加入(‘’)</q><br/>第一層的後面加入(” )</q></p>
接下來的文字列要加入引用符號第一層的前面加入(“ )
第二層的前後加入(‘ ’)
第一層的後面加入(” )