12

It says the difference is that :after is CSS2, while ::after is CSS3. Are there any more important differences?

(I've tried Googling, but the colons seem to throw off the search)

3 Answers3

22

Pseudo-elements were denoted with a single colon in CSS2, but have been changed in CSS3 "in order to establish a discrimination between pseudo-classes and pseudo-elements". For compatibility reasons a single colon is still allowed for the pseudo-elements defined in CSS 1 and CSS2.

CSS2

5.12.3 The :before and :after pseudo-elements

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.

CSS3

7. Pseudo-elements

[...]

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

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.

Community
  • 1
  • 1
Zeta
  • 103,620
  • 13
  • 194
  • 236
5

::after won't work in some older browsers (I think IE8 is the only relevant one)

In general, you should use ::after but there's no harm in using :after for compatibility, so long as you understand that it is a psuedo-element, not a psuedo-class

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
0

On the contrary: ::after WORKS on IE8, while :after won't do it.

Wakkos
  • 99
  • 1
  • 4
  • 1
    I think you might mean the other way around. `::after` is the new syntax, and AFAIK IE8 doesn't support it. OTOH no browser will ignore `:after`, for compatibility reasons. – cHao Feb 10 '14 at 12:55
  • I've tested in IE8 and :after won't work, while ::after works fine. I'll make the tests again to make sure anyway. – Wakkos Feb 10 '14 at 13:54
  • It might be odd to ask after 4 years but did you check it? – Tushar Shukla Jun 02 '18 at 10:21