Apologies the div:after should have said .test:after.
I originally just used div as a selector for the styles as there was only one div in the example then thought I better use a class in case someone gets confused but forgot to change the div:after to .test:after :blush:
I already gave browser support in the demo and it is IE8+ and all other modern browsers (basically not supported in IE7 and under).
:after places generated content after the content in that element (not after the element). It goes hand in hand with the 'content' property which actually places the generated content into the html.
The quotes can be empty or contain a space - it doesn't really matter these days. What the content property does is place a pseudo box in the html that you can then style as you like. Without the content property there is nothing to style and without content in the 'content' property the box is empty and can be used for decoration. In fact :after is perfect for decoration as you should never insert important information via the content property.
The position:relative on the div container is imperative as it creates the stacking context for the now absolutely placed content that was inserted into the html. By using top, bottom, left and right co-ordinates the element maintains complete integrity with the parent div and will expand and contract as required should the div size be fluid or the height changed.
There is no need to nest another element (unless you want to support IE7 and under) and using :after for decoration continues the separation of structure from presentation goals, rather than polluting the mark up with unwanted html.
Using :before and :after are perfect tools for adding decorations to elements when the need arises and that you don;t need to support older browsers. The fact that Ie6 and 7 don't get a border is no loss to the usefulness of the page and falls into the graceful degradation category.
Apologies once again for my initial confusing code as the rule should have said .test:after (although it would still have worked form my example as there was only one div).