The :before and :after pseudo-elements syntax

In my previous articles, you may have noticed how often I used these pseudo-elements. Why I like to use them? Because they are so handy to use as no extra HTML markup is required, but this article’s purpose isn’t about pseudo-elements advantages.

This article’s purpose is to clarify some common misunderstandings regarding the above pseudo-elements syntax.



The pseudo-elements are so-called because they are not real  HTML elements. For example, there are no HTML tags called before or after, but using CSS you can apply styles to a certain element using :before or :after.

Single/double colon syntax

There is absolutely no difference between :before and ::before, or between :after and::after. Using double colon for pseudo-elements is “da new thang”, the CSS3 way.

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).

Find more at:

Let’s recap

Internet Explorer 7 and lower do not support the above pseudo-elements. But, the surprise is that IE8 does and I’d say that’s a very good (also the only) reason to use the single colon syntax.


Please note that this discution, to use single-colon (:) or double-colon (::), is valid only when talking about pseudo-elements. Pseudo-classes are left out of discussion.

How do you use pseudo-elements?

Single-colon or double-colon? Leave a comment and share with us your opinion!

Posted by: Dhiraj kumar

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s