All web developers have been using pseudo classes in their CSS code for years, but may never have thought twice about it - :hover, :visited and :active can be found in most stylesheets on the web, defining the appearance of links based on their status. There have been a variety of other pseudo classes and elements in CSS2, but their support across browsers was problematic and so there are not many examples of their use.
Now with the great push by all browser manufacturers to be ready for HTML5/CSS3 we suddenly have a majority of browsers that can handle the existing pseudo elements correctly and CSS3 has also added a rather bewildering list of new pseudo elements. So it's time to do something with all of this - and to keep things simple, I'll focus on an useful example for only one of the pseudo elements on this page.
Here is some more information about CSS3 Selectors of which Pseudo Elements are a sub-group:
You may also be interested in some of my other articles around HTML5, CSS3 and JavaScript.
Image Overlays With :after
This is a very useful little trick (I've unfortunately lost the link where I saw this before...) that allows to present images of any size with either round corners or a custom graphical frame. For one or two images this may not be worth it, but if you expect to have hundreds of photos in a dynamically generated page, this may save a lot of time and money vs. pre-processing all images in Photoshop.
The photos in the left and right columns are identical and are shown on the right as they are. On the left we have added a class to the div container for each of the images and this class is defined in the CSS together with an :after pseudo class which adds a pseudo element after each of the divs which is then placed over the div container.
This is a bit of a mind bender: The pseudo element defined with :after is not part of the DOM of the page since it is added as part of the style sheet rendering - the box with the border image exists visibly, but can not be directly manipulated by JavaScript as any other object in the page.






To the left is the border image that I'm using for the photo frame, and below you can see the HTML for one of the photos inclusive of the div container and the style and pseudo class applied to it: