TagCSS3

文言文

::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 的部分都選不到（如下）？

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

使用說明

• 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

相關文章

• CSS FAQ：偽類和偽元素差在哪？
• content
• ::first-line
• ::first-letter
• ::selector

其他資訊

• MUKI－那些 CSS 偽元素可以幫你做的 10 個效果
• Chrome 32+ 的開發者模式支援選取和編輯偽元素囉！

參考資料

• CSS Tricks Almanac ::after / ::before
• W3C – CSS3 pseudo-element double colon syntax
• 網頁藝術思考－CSS 網頁設計藝術, 無障礙網頁親和力