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.
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).
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!
That’s nice to use :after and :before pseudo classes, but I am still not comfortable to use this, rather it will be better to say that I am not got habituated to use this pseudo classes yet.
Anyways thanks…
Ashish, I think you’re missing all the fun. Using the above pseudo-elements can help you achieve great results.
Really? This has nothing to do with a trend! :: colon is a HACK to make it work with IE browsers and nothing MORE. It’s not some trend “gee lets add more work”
DO YOUR HOMEOWKR.
As I wrote above, the double colon syntax (::) was introduced in CSS3 to make the distinction between pseudo classes and pseudo elements.
Also, note that double colon syntax (::) has absolutely nothing to do with IE hacks.
I do not see the difference between using (:) or (::). But it’s convenient – one look at to determine where the pseudo-element, where the pseudo-class. In general, I use a pseudo-elements a long time and I believe them to be necessary for a web designer.
Hi Red!
and is it possible to apply the pseudo-elements on all the html tags, including forms, inputs…?
thankx so much!!
You can use pseudo-elements with anything that actually has content…
Tanx for your nice explain…. but, why don’t u explain more about how to use them?! I really appreciate your website design that in every part of it I see u use them to decorate the design…
anyway! tanx!