看不到效果?
如果您看不到正確的呈現?(強烈建議以下)
  1. 請安裝新式瀏覽器並更新至最新版本。
  2. 如果您是使用新版 ie 仍舊看不到應有的呈現:
    • [功能表列] > [工具] > [相容性檢視設定],取消勾選 [ … Microsoft …更新 … 清單] 。這將會影響您瀏覽其它不當編排的網站,如果您不想這樣,只是想這次暫時看到,請使用下一項方式。
    • [功能表列] > [工具] > [F12 開發者工具] (或直接按 F12) ,在開啟的下方視窗 [瀏覽器模式或使用者代理程式] 選 [Internet Explorer 新版編號或預設值] , [文件模式] 選 [Internet Explorer 標準或預設值] ;再按 F12 就可以關掉下方視窗。這個方式可能每次進站都需要再麻煩指定一次。
    • 如果您使用的是 Windows XPInternet Explorer ,很抱歉本站大部分的内容不適合您。

Pseudo-elements ::before, ::after 範例

  • 說明:以特別的 CSS selectors (指標) 語法,指向 html 元素 (elements, 如 p, h1, div 等) 裡沒有實際元素名稱或原來不存在的內容,並且使其被視為一個新的元素,稱之為擬元素 (pseudo-elements) 。在原有 selectors 加上 ::before::after擬元素表示法,如 #main::before ,將會指向該元素的內容最前或最後,並可在該處加入新的字元,而且新加的字元被視為新的元素,也可以賦予各種設計風格 (styles)。
  • 適合:有 htmlcss 語法基礎概念者。
  • 難度:等級2
  • 更新:
  • 支援: firefox, opera, safari, google chrome, ie8 。(至更新時)
xhtml
<strong class="amount">700</strong>
css
.amount::before {content:"$ ";}
.amount::after {content:" 萬元";}
原來只有 700 ,但加了 css 以後呈現會是
$ 700 萬元

思考 - ::before, ::after Pseudo-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 說明。

參考資源
散佈、展示請參閱 Creative Commons 授權條文,禁止重混,引述請增加原文連結。
文章標籤
創作者介紹

網頁藝術思考 - CSS 網頁設計藝術, 友善的無障礙網頁

不惑仔 發表在 痞客邦 PIXNET 留言(3) 人氣()


留言列表 (3)

發表留言
  • good!!
  • 很棒喔

    Leon
  • dayday
  • 第一次知道
找更多相關文章與討論