Tutorial Dreamweaver - Wednesday, January 02, 2008
Generated Content

A new feature is included in the Cascading Style Sheets (or CSS) level 2 and CSS 2.1. This feature is called generated content and it represents content which is created by the browser, but which is not represented either by markup or content.

An example of a generated content is list markers. When it comes to representing the markers, nothing in the markup of a list item can be used and the appropriate marker in generated automatically by the browser, thus eliminating the need for the author to write the markers into the document's content. When the lists are ordered, the marker appears under the form of an incremental counter. Its value is grown one by one for each item present in the list. When the lists are unordered, the marker appears under the form of a bullet (square, circle, and disk).

List-marker Positioning

The ability to control the distance between a marker and the content of a list item is a feature that web developers have been requesting for a long time. In their help has come CSS2, which defies the ways of doing this. The marker-offset and display value of marker properties are the properties that CSS2 offers in this regard. Because after some time discontents have appeared as this was a clumsy approach to the problem, these properties have been removed in CSS 2.1.

The latest version, CSS3, which is still under development, has a different approach to this. The new technique is more compact and easier to affect the placement of markers. This is present under the: :marker pseudo-element. If things remain unchanged until the final CSS3 specifications, in order to get markers close positioned against the content of list items, the author may write just li::marker {margin-right: 0.125em;}.

Inserting Generated Content

The :before and : after pseudo-elements are used in order to insert into your document the generated content. The use of these commands places the generated content either before, or after the content of an element by way of the property of the content.

If one may want that every hyperlink to be proceeded with the text "(link)" in order to mark them for printing, one may use the following rule to do that:

a[href]:before {content: "(link)";}

Between the element content and the generated content there is no space because in that particular example, the value of content does not include a space. In order for a space to appear between the generated content and the actual content, the following modifications must be made to the code:

a[href]:before {content: "(link) ";}

Despite being a small difference, it is nonetheless important.

As another example, one may desire that at the end of a PDF document a small icon would be inserted. The code to do this is at follows:

a.pdf-doc:after {content: url(pdf-doc-icon.gif);}

If one wants to add certain elements, such as a border, around the links, this is done like:

a.pdf-doc {border: 1px solid gray;}

CSS 2 and CSS 2.1 prohibit the positioning of :before and :after content, as well as list-style properties and table properties. Some other prohibitions which are mentioned by CSS2 and CSS2.1 are:

• if there is a block-level element as the subject of a :before selector, the none, inline, block and marker values can be attributed to the display property.
• If there is an inline-element as the subject of a :before selector, the values which can be attributed to the display property are none and inline. If any other values is set, it will be interpreted as inline.