:BEFORE
:AFTER 指定一個元素的結束點之後，設計獨特的風格。:BEFORE 指定一個元素的開始點之前，設計獨特的風格。可以配合 CONTENT 特徵，加上文字或其它內容。有些特徵不能用在 :after, :before 後：例如 position, float, list 特徵組, table 特徵組。
- 風格用法：
<style type='text/css'>
I:before { content:open-quote; color:red }
I:after { content:close-quote; color:red }
.quo:before { content:'＜' ; color:red }
.quo:after { content:'＞' ; color:red }
</style>
孔子說：<i>有朋自遠方來，不亦樂乎！</i><br />
孔子說：<tt>有朋自遠方來，不亦樂乎！</tt><br />
孔子說：<tt class='quo'>有朋自遠方來，不亦樂乎！</tt> - 執行結果：
孔子說：有朋自遠方來，不亦樂乎！
孔子說：有朋自遠方來，不亦樂乎！
孔子說：有朋自遠方來，不亦樂乎！
- IE6 無此項；Safari, Chrome 不能解讀 open-quote, close-quote；IE8, Firefox3.0 都成功。
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr EM:hover:before {content:'基隆'; color:red}
.hvr EM:active:after {content:'高雄'; color:blue}
</style>
<div class=hvr>
<em>火車</em>
</div> - 執行結果：
火車
對元素的第一個字母，設計獨特的風格。只能用在區塊元素。
- 風格用法：
<style type='text/css'>
.cls2::first-letter {font-size:200%;
font-style:italic;
color:red;
}
</style>
<p class='cls2'>孔子說：有朋自遠方來，不亦樂乎！</p> - 執行結果：
孔子說：有朋自遠方來，不亦樂乎！
