Generated content is content added to the output document via CSS.

This is generally used when working with e.g. page headers and/or footers (please review chapter Page Margin Boxes for more information) or using pseudo-elements such as :before and :after.

Generated content is added by using the property "content".

For example, the headings in this sample are specified using the h1 element of XHTML and have the following style:

h1 {
    counter-increment: h1 1;
    counter-reset: h2 0;
}

h1:before {
    content: "Chapter " counter(h1, upper-latin) " - ";
}

This style information results in the following generated content, highlighted in red color:

Introduction to CSS Generated Content