HTML & CSS: Before and After Pseudo Elements
A few tutorials ago I alluded to pseudo elements; elements that aren't in the HTML, but can be created through CSS. I listed a few of them which all act very similarly: :first-child, :last-child, :first-letter, and :first-line. In this tutorial we're going to talk about two pseudo elements we haven't met yet which can accomplish a lot of things - :before and :after.
:before is able to add an element before any given element, and :after is able to add an element after (note browser support, as presented here). The syntax for using these in selectors is just like any other pseudo element – you could write a selector like a:before or #Something:before with no worries. The rather bizarre thing about these pseudo elements though is that they require the content property to be set. This property is one that can only be used with pseudo elements and is essentially used to set any content (for example text content) we want the pseudo element to have. So if we wanted to put a star symbol before and after every span (general purpose inline element) with the class of .protip - we could convert the unicode star symbol to the CSS entity code and we can then put this straight into the content property with something like the following:
1 2 3 | |
You can also do the same thing with "regular" characters, so something like span.protip:before { content: "."; } would work fine. Images can also be used via the content: url('path'); syntax.
A kind of cool effect that can be accomplished is making little icons appear before links which lead to certain locations. As you might expect this uses CSS2 attribute selectors along with pseudo elements. Something like the following which simply uses the CSS3 *= attribute condition (which checks if the attribute contains the value anywhere) should work fine:
1 2 3 | |
This basic usage can be kind of cool and useful in certain situations, but what really makes pseudo elements special is that we can style them just like normal elements (whether they have text in or not). This is what makes :before and :after so attractive for this "extra element" sort of usage - they don't require text content like the other pseudo elements we know about do. If you want :before or :after to have no content (as we just talked about), you can just set content: "";. This is extremely powerful, as you can just put in a display: block;, a width and a height, and you have another element on your page to play with!
The best way to see what pseudo elements can really accomplish is to look at some examples. I've whipped up a basic CSS person using pseudo elements, positioning, and some CSS3 properties to get the shapes right. Browser support isn't excellent as it uses some cutting-edge stuff, but it can achieve an awful lot using four basic elements. The link is here, and you should be able to understand the basics of what I'm doing with it if you take a look at the source.
Nicolas Gallagher has been nicknamed the "king of pseudo-elements", and that claim isn't far off the mark. He's done a whole lot of interesting experimentation with them including making some fully functional CSS icons using them!
So the conclusion here is that pseudo-elements are super cool. I suggest playing around with them a little bit and seeing what you can make. Try and make a basic block person using as few elements as possible (Perhaps Steve) and just see what you can create!