close
Pseudo-elements ::before, ::after 範例
- 說明：以特別的 CSS selectors (指標) 語法，指向 html 元素 (elements, 如
p, h1, div等) 裡沒有實際元素名稱或原來不存在的內容，並且使其被視為一個新的元素，稱之為擬元素 (pseudo-elements) 。在原有 selectors 加上::before或::after的擬元素表示法，如#main::before，將會指向該元素的內容最前或最後，並可在該處加入新的字元，而且新加的字元被視為新的元素，也可以賦予各種設計風格 (styles)。 - 適合：有 html 及 css 語法基礎概念者。
- 難度：
- 更新：
- 支援： firefox, opera, safari, google chrome, ie8 。(至更新時)
xhtml<strong class="amount">700</strong>css.amount::before {content:"$ ";}
.amount::after {content:" 萬元";}- 原來只有 700 ，但加了 css 以後呈現會是
- $ 700 萬元
- 參考資源
-
- W3C pseudo-elements - w3c 官方文件 (英文) 。
散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。
文章標籤
全站熱搜
CSS selectors語法(CSS教學) (3)
思考 -
::before, ::afterPseudo-element Selectors 使用原則::為 CSS3 擬元素的標準表示法，主要是為了與:的擬類別 (Pseudo-classes) 作區分，有別於原來 css2 兩者同樣使用:表示，目前較先進瀏覽器 (firefox, opera, safari, …) 均有支援。::before搭配contnet特性 (property) 雙引號內所指示的字元，可在 selectors 指定的元素最前加入該字串 (包括空格，如上例的"$ ")， css 因而將此字串視為一個元素，所以可以賦予該字串各種設計風格；::after一樣用法，不同的只是加在最後。可以把上例想像成加了兩個實際的元素，如：xhtml<strong class="amount"><span>$ </span>700<span> 萬元</span></strong>另加一下 css 看看變化，
css.amount {color:red;}這樣會是整個 $ 700 萬元 都變成紅字，因為
::before, ::after所加入的字串擬元素，仍屬於.amount元素的內容，所以依據繼承性，擬元素 $, 萬元 也都是紅字了。稍微改變一下 css 看看：css.amount::before {content:"$ "; color:blue;}.amount::after {content:" 萬元"; color:blue;}
這樣只有擬元素變成藍字，結果會像 $ 700 萬元，先前定義的紅字還是存在。
::before,::after沒有限制兩個同時都要指定，也可以只指定一個前或一個後。需要注意的是，以
::before, ::after配合content所產生的擬元素字串，會視為行內層級元素 (inline emements)，也就是文字層級 (text-level) 。至於
content特性還有更有用的字串加入方式，由於撰文時大多瀏覽器支援不甚完全，以後再作討論，有興趣可先參考 W3C The content Property 說明。