有時見到: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