generate.html

CSS lets learn this step by step...

The former has two forms:
'counter(<var>name</var>)' or 'counter(<var>name</var>,
<var>style</var>)'. 
The generated text is the value of the named
counter at this point in the formatting structure; it
is formatted in the indicated
<a href="#counter-styles">style</a> ('decimal' by default).
The latter function also has two forms:
'counter(<var>name</var>, <var>string</var>)' or 'counter(<var>name</var>,
<var>string</var>, <var>style</var>)'. The generated text is the value of all
counters with the given name at this point in the formatting structure,
separated by the specified string. The counters are rendered
in the indicated <a href="#counter-styles">style</a> ('decimal' by default).
See the section on <a href="#counters">automatic counters and
numbering</a> for more information.
<dt><span class="index-inst" title="open-quote"><a name="x12" href="generate.html#value-def-open-quote" class="noxref"><span
class="value-inst-open-quote"><strong>open-quote</strong></span></a></span> and 
<span class="index-inst" title="close-quote"><a name="x13" href="generate.html#value-def-close-quote" class="noxref"><span
class="value-inst-close-quote"><strong>close-quote</strong></span></a></span>

<dd>These values are replaced by the appropriate string
from the <a href="generate.html#propdef-quotes" class="noxref"><span class="propinst-quotes"><strong>'quotes'</strong></span></a> property.

<dt><span class="index-inst" title="no-open-quote"><a name="x14" href="generate.html#value-def-no-open-quote" class="noxref"><span
class="value-inst-no-open-quote"><strong>no-open-quote</strong></span></a></span>
and <span class="index-inst" title="no-close-quote"><a name="x15" href="generate.html#value-def-no-close-quote" class="noxref"><span
class="value-inst-no-close-quote"><strong>no-close-quote</strong></span></a></span>

<dd>Inserts nothing (the empty string), but increments (decrements) 
the level of nesting for quotes.

<dt><a name="x16"><span class="index-def" title="attr()"><strong>attr(X)</strong></span></a>
<dd>This function returns as a string the value of attribute X 
for the subject of the selector. The
string is not parsed by the CSS processor.  If the subject of the selector
doesn't have an attribute X, an empty string is returned. The
case-sensitivity of attribute names depends on the document language.
<strong>Note.</strong> In CSS2, it is not possible to refer to
attribute values for other elements of the selector.
</dl>

<P>The <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> property
controls whether the content is placed in a block, inline, or marker
box.

<P>Authors should put <a href="generate.html#propdef-content" class="noxref"><span class="propinst-content">'content'</span></a>
declarations in <span class="index-inst" title="@media"><a name="x17"
href="media.html#at-media-rule">@media</a></span> rules when
the content is media-sensitive. For instance, literal
text may be used for any media group, but images only
apply to the visual + bitmap media groups, and sound files only
apply to the aural media group.

<div class="example"><P style="display:none">Example(s):</P>
<p>The following rule causes a sound file to be played
at the end of a quotation (see the section
on <a href="aural.html">aural style sheets</a> for additional
mechanisms):</p>

<pre>
@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }
</pre>
</div>

<div class="example"><P style="display:none">Example(s):</P>
<p>The next rule inserts the text of the HTML "alt" attribute before the
image. If the image is not displayed, the reader will still see the
"alt" text.

<pre>
IMG:before { content: attr(alt) }
</pre>
</div>

<p>Authors may include newlines in the generated content by writing
the "\A" escape sequence in one of the strings after the <a href="generate.html#propdef-content" class="noxref"><span
class="propinst-content">'content'</span></a> property. This inserts a
<a name="x18"><span class="index-def" title="forced line break"><dfn> forced line
break</dfn></span></a>, similar to the BR element in HTML. See <a
href="syndata.html#strings">"Strings"</a> and <a
href="syndata.html#escaped-characters">"Characters and case"</a> for
more information on the "\A" escape sequence.

<div class="example"><P style="display:none">Example(s):</P><P>

<PRE>
H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}
</pre>
</div>

<P>Generated content does not alter the document tree.  In particular, it
is not fed back to the document language processor (e.g., for
reparsing).

<div class=note>
<p><em><strong>Note.</strong> In future levels of CSS, the <a href="generate.html#propdef-content" class="noxref"><span
class="propinst-content">'content'</span></a> property may accept
additional values, allowing it to vary the style of pieces 
of the generated
content, but in CSS2, all the content of the :before or :after
pseudo-element has the same style.
</em></p>
</div>

<h2>12.3 <a name="compact-run-in-gen">Interaction</a> of :before and :after
with <span class="index-inst" title="compact"><a name="x19" href="visuren.html#value-def-compact" class="noxref"><span
class="value-inst-compact">'compact'</span></a></span> and <span
class="index-inst" title="run-in"><a name="x20" href="visuren.html#value-def-run-in" class="noxref"><span
class="value-inst-run-in">'run-in'</span></a></span> elements</h2>

<p>The following cases can occur:</p>



<ol>
<li><strong>A 'run-in' or 'compact' element has a :before
pseudo-element of type 'inline':</strong> the pseudo-element is taken
into account when the size of the element's box is computed (for 'compact')
and is rendered inside the same block box as the element.

<li><strong>A 'run-in' or 'compact' element has an :after
pseudo-element of type 'inline':</strong> The rules of the previous
point apply.

<li><strong>A 'run-in' or 'compact' element has a :before
pseudo-element of type 'block':</strong> the pseudo-element is
formatted as a block above the element, and does not take part in the
computation of the element's size (for 'compact').

<li><strong>A 'run-in' or 'compact' element has an :after
pseudo-element of type 'block':</strong> both the element and its
:after pseudo-element are formatted as block boxes. The element
is <em>not</em> formatted as an inline box in its own :after
pseudo-element. 




<li><strong>The element following a 'run-in' or 'compact' element has
a :before of type 'block':</strong> the decision how to format the
'run-in'/'compact' element is made with respect to the block box
resulting from the :before pseudo-element.

<li><strong>The element following a 'run-in' or 'compact' element has
an :before of type 'inline':</strong> the decision how to format the
'run-in'/'compact' element depends on the <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> value of the element to which
the :before is attached.

</ol>

<div class="example"><P style="display:none">Example(s):</P>
<p>Here is an example of a 'run-in' header with an :after 
pseudo-element, followed by a paragraph with a :before pseudo-element. All
pseudo-elements are inline (the default) in this example. When the
style sheet:</p>

<pre>
H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }
</pre>

<p>is applied to this source document:</p>

<pre class="html-example">
&lt;H3&gt;Centaurs&lt;/H3&gt;
&lt;P&gt;have hoofs
&lt;P&gt;have a tail
</pre>

<p>The visual formatting will resemble:</p>

<pre class="none">
Centaurs: ... have hoofs
... have a tail
</pre>
</div>

<h2>12.4 <a name="quotes">Quotation marks</a></h2>

<P>In CSS2, authors may specify, in a style-sensitive and
context-dependent manner, how user agents should render quotation
marks. The <a href="generate.html#propdef-quotes" class="noxref"><span class="propinst-quotes">'quotes'</span></a> property
specifies pairs of quotation marks for each level of embedded
quotation. The <a href="generate.html#propdef-content" class="noxref"><span class="propinst-content">'content'</span></a>
property gives access to those quotation marks and causes them to be
inserted before and after a quotation.

<H3>12.4.1 <a name="quotes-specify">Specifying quotes</a> with the <a href="generate.html#propdef-quotes" class="noxref"><span
class="propinst-quotes">'quotes'</span></a> property</H3>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'quotes'"><a name="propdef-quotes" class="propdef-title"><strong>'quotes'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>[<a href="syndata.html#value-def-string" class="noxref"><span class="value-inst-string">&lt;string&gt;</span></a> <a href="syndata.html#value-def-string" class="noxref"><span class="value-inst-string">&lt;string&gt;</span></a>]+ | none | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>depends on user agent
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>This property specifies quotation marks for any number of embedded
quotations. Values have the following meanings:</p>

<dl>
<dt><strong>none</strong>
<dd>The 'open-quote' and 'close-quote' values of the
<a href="generate.html#propdef-content" class="noxref"><span class="propinst-content">'content'</span></a> property
produce no quotations marks.
<dt>[<span class="index-inst" title="&lt;string&gt;"><a name="x22" href="syndata.html#value-def-string" class="noxref"><span
class="value-inst-string"><strong>&lt;string&gt;</strong></span></a></span>
&nbsp;<span class="index-inst" title="&lt;string&gt;"><a name="x23" href="syndata.html#value-def-string" class="noxref"><span
class="value-inst-string"><strong>&lt;string&gt;</strong></span></a></span>]+
<dd>Values for the 'open-quote' and 'close-quote' values of the
<a href="generate.html#propdef-content" class="noxref"><span class="propinst-content">'content'</span></a> property are taken
from this list of pairs of quotation marks (opening and
closing). The first (leftmost) pair represents the outermost level of
quotation, the second pair the first level of embedding, etc. The user
agent must apply the appropriate pair of quotation marks according to
the level of embedding.
</dl>


<div class="example"><P style="display:none">Example(s):</P>
<P>For example, applying the following style sheet:</p>

<PRE class="example">
/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "