此特徵配合 :after, :before 使用，可以在文件中加入內容。可設定的值有：
- <string>：設定字串。
- <uri>：設定資源網址，可設多個 url(網址)。
- <counter>：設定計數器。請參考 計數器的說明與範例。
- attr(X)：可將 X 屬性的內容取出。
- open-quote：加上 quotes 特徵所宣告的左括號字串。
- close-quote：加上 quotes 特徵所宣告的右括號字串。
- no-open-quote：不加括號字串，但增加一層括號巢（nesting）。
- no-close-quote：不加括號字串，但減少一層括號巢。
- inherit：繼承父元件的特徵值。
測試字串與 attr(X)。
- 風格用法：
<style type='text/css'>
.cls:before { content: attr(title)"："; color:blue }
.cls i:before { content:'『' ; color:green}
.cls i:after { content:'』' ; color:yellow}
</style>
<p class='cls' title='子曰' style='color:red'>
<i>學而時習之，不亦說乎？</i></p> - 執行結果：
學而時習之，不亦說乎？
- IE6 無此項；IE8, Firefox, Safari, Chrome 都成功。
測試 url()。
- 風格用法：
<style type='text/css'>
.url:before { content:
'第一圖'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg)
'第二圖'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHoHui01woBwkOdqFjwXKNEPsuk_t0yLFXO6PdJD_OO-fTyLAksb6JrIwm_E9aY-Lj5x7LkTxeu_450N-eutQiPei_C5uprpGOxv95ef9nZe7qrn_15MVUcLVoQ3sxRkggGNo_q9g_pA7/s200/absolute.JPG)}
</style>
<div class=url>
圖形測試
</div> - 執行結果：
圖形測試
- IE6 無此項；Firefox, Safari, Chrome 都成功。
測試括號。
- 風格用法：
<style type='text/css'>
.quo {quotes:' { ' ' } ' ' [ ' ' ] ' ' ( ' ' ) ' }
.quo SPAN:before {content:open-quote; color:red; font-size:140%}
.quo SPAN:after {content:close-quote; color:blue; font-size:140%}
.quo I:before {content:no-open-quote' '; color:red; font-size:140%}
.quo I:after {content:no-close-quote' '; color:blue; font-size:140%}
</style>
<div class=quo>
<span>第一層<span>第二層<span>第三層圓括號
</span>方括號</span>曲括號</span>
</div>
<div class=quo>
<span>第一層<i>第二層<span>第三層圓括號
</span>無括號</i>曲括號</span>
</div> - 執行結果：
第一層第二層第三層圓括號 方括號曲括號第一層第二層第三層圓括號 無括號曲括號
- IE6 無此項；IE8, Firefox 會展現指定的括號。Safari, Chrome 沒有展現括號。
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {border:solid 1px red;
}
.hvr:hover:after
{content:'什麼車最長？';
background:red;
}
.hvr:active:after
{content:'塞車';
background:blue;
}
</style>
<span class=hvr>謎語：</span> - 執行結果： 謎語：
