::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.

大家可以試著用滑鼠去選取結果 (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.

: 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.

簡單來說就是：