擬似要素はダブルコロン、擬似クラスはシングルコロンで記述しよう。

CSS3からafterやbeforeなどの擬似要素（Pseudo-elements）の記述は、ダブルコロン（::）になりました。
これはhoverなどの「擬似クラス（Pseudo-classes）との差別化をはかるため」とのことです。
今までどおり、シングルコロン（:）でも正常に動作しますが、今後を考えると、これからはダブルコロンで記述したほうが良さそうです。

擬似要素一覧

ダブルコロン（::）で記述します。

• ::first-letter　･･･　最初に現れる文字に適用
• ::first-line　･･･　最初の行に適用
• ::before　･･･　要素の前に内容を追加
• ::after　･･･　要素の後に内容を追加
• ::selection　･･･　ユーザがハイライトした部分に適用

擬似クラス一覧

シングルコロン（:）で記述します。

• :active
• :any
• :any-link
• :checked
• :default
• :defined
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :fullscreen
• :focus
• :hover
• :indeterminate
• :in-range
• :invalid
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :valid
• :visited