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.

before-after-pseudo-elements

Pseudo-what?

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: http://www.w3.org/TR/css3-selectors/#pseudo-elements

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.

Important!

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

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryMobile Web Technologyadvance web technology,angle brackets,colon notation,configurable settings,core code,CSS,CSS 3,CSS 4,CSS framework,css namespaces,css3,css3 box shadow,discution,enterprise-it,free open source,graphical user interface,html and xhtml,html basics,html elements,html markup,interactive web applications,internet explorer 7,javascript,javascript functions,jquery,line tag,mobile,open source javascript,page elements,paragraph text,plugin,programming,software,software-development,technology,visual transitionIn 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.