Valid HTML5

CSS3 Demos

Generated Content and Counters

Generated Content has been around for a while; even IE (in v.8+) supports some of it nowadays. It's extremely useful for applying default characters and text via styling - it's how I'm rendering the yellow 'CODE' headings inside the example boxes in these pages, for example.

G.C shouldn't be used as a substitute for 'real' content, however, as those without a compliant browser will be completely unable to view it. It's sometimes seen as falling uncomfortably into a grey area between content and styling, and bears some careful thought before use. Perhaps because of this, it isn't commonly seen - which is why I talk about it on a site otherwise dedicated to CSS3:

Basic Generated Content

CSS2 allows the insertion of strings of text or images before or after designated content, via the pseudo-selectors :before and :after. This inserted content can be independently styled - layout-wise, it behaves as if it were a child element of the original content. Note that certain layout properties for G.C are only available to the most modern browsers - Firefox 3.5 is needed to position or float G.C, for example.

G.C can solve a number of niggling design problems with ease - inserting 'pipe' characters between horizontal navigation list items, nifty custom bullets, and hundreds of other applications. Using CSS3 selectors, it's also possible to add mini-icons to links based on their destination:

Generating Content from Attributes

One extremely useful trick is to pull in the values of element's attributes as on-page content. Suitable attributes include title, href, rel, and so on. Attractive pop-ups can be built this way, and print stylesheets can use styling intended to print URLs after their respective links:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Mortalwombat Home

Generated Content and Counters

There are many kinds of document where some form of numbering or counting content on-screen is useful and necessary - legal documents, chapter and sub-section headings, footnotes, and so on. In some cases, it's possible to achieve this via a stack of <ol>s, but they're not very flexible. CSS Counters allow for automatically re-starting the count and beginning a count at a value other than 1, for example.

A basic example is shown below. The most important part is to name each individual counter (e.g. 'chapters', below), and to mark where it increments - this is done on the original element, not on the :before or :after pseudo-selector. Counters also take one of the standard properties for list-style-type; here I use decimal to provide basic digits:

'Twas a dark and stormy night...

The sky above the port...

Counters can also be reset, as mentioned above - for example, sub-section counts might need to be reset whenever a new section starts. The counter-reset property is set on the element that does the resetting - below, it's the <h1>:



First thoughts


List of contributors


Finally, as previously mentioned, counters don't have to begin at 1 - you can use {counter-increment:chapters 4}, or reset them to a non-default with {counter-reset:sub-section 2}, for example.