heika note

有時見到:after，有時又見到::after，兩個到底有咩分別？

一個冒號－Pseudo-class

在Selector後加Keyword去指定所選的Element的特定狀態。最常見的是用於的:visited、:active之類。

兩個冒號－Pseudo-element

跟Pseudo-class的分別是：指定Document的「部分」而不是狀態。最常見的是::after、::before之類。

為何有時是一個冒號，有時是兩個冒號？

在CSS3前，不論是Pseudo-class還是Pseudo-element，都是一個冒號的。但Pseudo-element在CSS3已更改成兩個冒號，同時用一個冒號來指定Pseudo-element的寫法仍是可行。

結論

以Browser Compatibility來說，應是用一個冒號來指定Pseudo-element可支援更多Browser。不過對我此等無視Old version browser的人來說，會跟CSS3的標準來寫啦。

參考

Pseudo-classes
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo-elements
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Advanced CSS selectors
https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors#CSS3_pseudo-element_double_colon_syntax