CSS3 Pushing the Limits

Chapter 13

Getting Creative with Pseudo-elements

If you can remember all the way back to Chapter 1, you will recall the in-depth discussion of advanced CSS selectors. Well, it's 12 chapters on, and you finally get to enjoy the sequel! Pseudo-elements belong in the same bracket as selectors because they target aspects of the markup you use to style; however, despite their fundamental similarities, pseudo-elements hold much greater potential and open a new realm of possibilities for creative web designers to jump right into.

Pseudo-elements in their earliest form were actually first seen in the first CSS specification, with a couple more added in CSS 2.1. Their syntax was modified slightly in CSS3 to accentuate their difference from pseudo-classes (although this move hasn't gone as well as planned).

So what are pseudo-elements doing in a book on CSS3? Well, they may have been around for a long time, but finding a legitimate use for them has always been somewhat difficult. When CSS3 came along with all its new bells and whistles, though, it effectively injected a whopping shot of potential into pseudo-elements, suddenly making them an exciting prospect, full of possibilities.

With the help of these other CSS3 functionalities, I demonstrate how you can use pseudo-elements to really push the limits of what CSS is capable of doing. This chapter begins by establishing the difference between pseudo-elements and pseudo-classes before demonstrating how you can use the former to enhance ...