In CSS3 (the latest CSS), should I be using ::after or :after? JSFiddle says that I should use 2 colons instead. I am starting a club where I am teaching people HTML and CSS, so I want to make sure I'm teaching them the right thing because the message JSFiddle puts may confuse them. I also want to know this for myself.
Use the ::after syntax. If you check the current specification you can read:
The main differences between the selectors in CSS2 and those in Selectors are:
...
new pseudo-elements, and introduction of the "::" convention for pseudo-elementsref
And
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification. ref
You will also find the same information in the future specification of Selectors Level 4
Because CSS Level 1 and CSS Level 2 conflated pseudo-elements and pseudo-classes by sharing a single-colon syntax for both, user agents must also accept the previous one-colon notation for the Level 1 & 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter). This compatibility notation is not allowed any other pseudo-elements. However, as this syntax is deprecated, authors should use the Level 3+ double-colon syntax for these pseudo-elements.