Saturday, September 5, 2009

Generated Content

* Some CSS properties allow us to generate content.
* These properties work in conjunction with a further two pseudo elements, before and after.
* NB: Although we are generating content which appears inside the browser, we are not altering the document - just altering the presentation of the document.
* Using the selector #content:before {content:"Designed by Daniel";} would place this string before the other content.
* Using the selector #content:after {content:"Designed by Daniel";} would place this string after the other content.
* This extra content will appear alongside any text from the HTML but it is stored along with the CSS, usually in a seperate file.
* We can also use CSS in this way to create a counter for an unordered list for example.
* ul {counter-reset:count;} creates a counter and names it 'count'.
* li:before {counter-increment:count; content: "number" counter(count) ":";} instructs the counter to increment and places the specified text before the list item.

No comments:

Post a Comment