:AFTER, :BEFORE, ::FIRST-LETTER, ::FIRST-LINE, ::SELECTION

:AFTER | :BEFORE | ::FIRST-LETTER | ::FIRST-LINE | ::SELECTION

:AFTER
: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>

::FIRST-LETTER

對元素的第一個字母，設計獨特的風格。只能用在區塊元素。

<style type='text/css'> .cls2::first-letter {font-size:200%; font-style:italic; color:red; } </style> <p class='cls2'>孔子說：有朋自遠方來，不亦樂乎！</p>