Generated content

This is not a selector, but is used with the pseudo-elements ::before and ::after. There are only certain types of content that you can generate. Here is a rundown.

content

This is the content that will be placed either before or after elements:

content(none, <string>, <uri>, <counter>, open-quote, close-quote, no-open-quote, no-close-quote, attr(x))

Parameters

Following are the parameters and their description:

• none: This parameter does not generate any content
• normal: This is the default parameter and is the same as none
• <string>: This is any string text content
• <uri>: This will map to a resource, for example, an image
• <counter>: This can be used as either the counter() or counters() function to put a counter before or after each element
• open-quote and close-quote: This is used with the quotes generated content property
• no-open-quote and no-close-quote: This does not add content, but increments or decrements the nesting level of quotes
• attr(x):This returns the value of the attribute of the element this is targeting

Description

This property is used to add content to the document. The output is controlled by the value used. The values can be combined to create more complex content.

A new line can be inserted with the characters \A. Just remember that HTML will ignore a line break by default.

Here are some examples. These will demonstrate how to use many of the content values:

<h1>First</h1>
<h1>Second</h1>
<h1 class="test">Attribute</h1>
<h2>Line Break</h2>
<blockquote>Don't quote me on this.</blockquote>

Here is the CSS. The h1 elements will have the word "chapter" along with a number before each. The h2 element will have a line break in its content. Finally, the blockquote will have an opening quote and a closing quote:

h1 { counter-increment: chapter; }
h1::before { content: "Chapter" counter(chapter) ": " attr(class) ; }
h2::before { content: "New\A Line"; white-space: pre; }
blockquote::before { content: open-quote; }
blockquote::after { content: close-quote; }

Quotation marks

Quotation marks specify which characters are used as open and close quotes:

quotes: [<string> <string>]+

Parameters

<string> <string>: These are pairs of characters that will represent an open and close quote. You can use this multiple times to create levels of quotes.

Description

We can use this property to set which quotation marks are used.

Here is an example that has a nested quote:

<blockquote>Don't quote me <blockquote>on</blockquote> this.</blockquote>

The quotation marks are completely arbitrary. Here is the CSS:

blockquote { quotes: ":" "!" "&" "*"; }