HTML5 and CSS3 Advent 2011

:before and ever :after

Two of our favourite pseudo-elements are the :before and :after elements. They are very usefull to add all kinds of visual gimmicks to your elements, especially if you don't want to clutter up your beautifully crafted HTML.

This is a simple note

And this is an optical illusion!

Some sticky notes

How are you?


What a great dialogue!
This calendar is not only about HTML but also a lot about CSS. You can find the HTML5 spec at In an earlier calendar entry you'll find another example of the generated content module in action.
Some tooltips!

How does it work?

With the :before and :after pseudoelements we can add extra visual but also contextual elements to our existing element. This makes it easy to add things like the folded corner or the speach bubble's stem. Another thing that is truly useful is that you can use the generated content module to insert actual content from the element's attributes into the :before or :after elements.

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012