TagCSS

::after / ::before

文言文

::after 為可以利用 CSS 在頁面中插入內容的偽元素 (pseudo element)。
偽元素從字面上的意思即不存在或是假的元素。也就是說它不會直接出現在 HTML 文件裡(例如:<div>、<p>、<h1> 等),而是透過 CSS 來建立與操作的元素。
雖然 ::after 的內容沒有在 DOM 裡,但頁面上還是看得到。::before::after 幾乎是一樣的東西,不同就看你是要從前面還是後面插入 XD (下面有詳細使用說明
文言文就不講了,快來看看範例吧!

範例

See the Pen ::after / ::before by Candy (@stringpiggy) on CodePen.22914

大家可以試著用滑鼠去選取結果 (Result) 的那段文字,是不是發現 ::after::before 的部分都選不到(如下)?

SP-after-before-example

這就是沒有被寫入 DOM 裡面但頁面上看得到的意思。再進一步看 Chrome 的開發者模式裡面完全找不到我們在所要插入的內容。在這也可以很清楚看見 ::before::after 的插入點。

SP-after-before-dev

使用說明

  • content 位置要出現在元素的前面就使用 ::before,後面就用 ::after
  • ::after 除了出現位置在元素的後面外,在 CSS 裡面「預設」會蓋在 ::before 上面(如下)。

See the Pen ::after / ::before source-order by Candy (@stringpiggy) on CodePen.22914

: vs ::

只要瀏覽器有支援雙冒號 (::) 這個 CSS3 語法就有支援單冒號 (:),不過 IE 8(古董了吧~)只有支援到 (:),所以如果還想要支援到 IE 8 的話,就不能用 (::) 囉!(我個人是會忽略 IE 8 這個的老古董啦)

另外,在 W3C 標準中有提到

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. […] CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

簡單來說就是:

  • 偽類 (pseudo classes) 使用單冒號 (:)
  • 偽元素 (pseudo elements) 使用雙冒號 (::)
  • 如果想要支援舊的瀏覽器就全部都先使用單冒號 (:)

瀏覽器支援

  • Firefox 3.5-:不支援偽元素使用 position: absolute;
  • Opera 9.2:在偽元素中的空格都會長的像有用 <pre> 元素包住的樣子
  • IE 8:不支援偽元素使用 z-index
Chrome Safari Firefox Opera IE Android iOS
2+ 1.3+ 3.5+ 6+ 8+ 有兒 有兒

相關文章

其他資訊

參考資料

分類

標籤雲