xhtml
<strong class="amount">700</strong>
css
.amount::before {content:"$ ";}.amount::after {content:" 萬元";}
::before, ::after
:: 為 CSS3 擬元素的標準表示法,主要是為了與 : 的擬類別 (Pseudo-classes) 做區分,有別於原來 CSS2 兩者同樣使用 : 表示,目前較先進瀏覽器 (firefox, opera, safari, …) 均有支援。css
::
:
::before 搭配 contnet 特性 (property) 雙引號內所指示的字元,可在 selectors 指定的元素最前加入該字串 (包括空格,如上例的 "$ "), CSS 於是將此字串視為一個元素,因此能夠賦予該字串各種設計風格; ::after 一樣用法,不一樣的只是加在最後。能夠把上例想像成加了兩個實際的元素,如:html
::before
contnet
"$ "
::after
<strong class="amount"><span>$ </span>700<span> 萬元</span></strong>
另加一下 CSS 看看變化,css3
.amount {color:red;}
這樣會是整個 $ 700 萬元 都變成紅字,因為 ::before, ::after 所加入的字串擬元素,仍屬於 .amount 元素的內容,因此依據繼承性,擬元素 $, 萬元 也都是紅字了。稍微改變一下 CSS 看看:post
.amount
.amount::before {content:"$ "; color:blue;}.amount::after {content:" 萬元"; color:blue;}
這樣只有擬元素變成藍字,結果會像 $ 700 萬元,先前定義的紅字還是存在。 ::before, ::after 沒有限制兩個同時都要指定,也能夠只指定一個前或一個後。spa
須要注意的是,以 ::before, ::after 配合 content 所產生的擬元素字串,會視為行內層級元素 (inline emements),也就是文字層級 (text-level) 。.net
content
至於 content 特性還有更有用的字串加入方式,由於撰文時大多瀏覽器支援不甚徹底,以後再做討論,有興趣可先參考 W3C The content Property 說明。firefox
思考 -
::before, ::after
Pseudo-element Selectors 使用原則::
為 CSS3 擬元素的標準表示法,主要是為了與:
的擬類別 (Pseudo-classes) 做區分,有別於原來 CSS2 兩者同樣使用:
表示,目前較先進瀏覽器 (firefox, opera, safari, …) 均有支援。css::before
搭配contnet
特性 (property) 雙引號內所指示的字元,可在 selectors 指定的元素最前加入該字串 (包括空格,如上例的"$ "
), CSS 於是將此字串視為一個元素,因此能夠賦予該字串各種設計風格;::after
一樣用法,不一樣的只是加在最後。能夠把上例想像成加了兩個實際的元素,如:htmlxhtml
<strong class="amount"><span>$ </span>700<span> 萬元</span></strong>
另加一下 CSS 看看變化,css3
css
.amount {color:red;}
這樣會是整個 $ 700 萬元 都變成紅字,因為
::before, ::after
所加入的字串擬元素,仍屬於.amount
元素的內容,因此依據繼承性,擬元素 $, 萬元 也都是紅字了。稍微改變一下 CSS 看看:postcss
.amount::before {content:"$ "; color:blue;}
.amount::after {content:" 萬元"; color:blue;}
這樣只有擬元素變成藍字,結果會像 $ 700 萬元,先前定義的紅字還是存在。
::before
,::after
沒有限制兩個同時都要指定,也能夠只指定一個前或一個後。spa須要注意的是,以
::before, ::after
配合content
所產生的擬元素字串,會視為行內層級元素 (inline emements),也就是文字層級 (text-level) 。.net至於
content
特性還有更有用的字串加入方式,由於撰文時大多瀏覽器支援不甚徹底,以後再做討論,有興趣可先參考 W3C The content Property 說明。firefox