• Home
• Backgrounds
• Rounded Corners
• Drop Shadows
• Transparency
• Transitions and Transforms
• Animations
• Columns
• Generated Content
• Custom Fonts
• Media Queries
• CSS3 Selectors

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:

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:

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>:

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.