Styling Web pages with CSS-2 |  |
Styling Web pages with CSS-2 | |
Use the content property inside the :before or :after pseudo-elements
to add content before or after some other element.
The value of this property consists of one or more items from this list, concatenated.
stringThe literal string is inserted into generated content. For the form of literal strings, see Section 6.3, “String constants”.
url("URI")
Insert the content (e.g., an image) from the
specified URI
counter(name)
Insert the value of the counter with the given name.
counter(name, style)
Insert the named counter, but present its value using
the given stylelist-style-type property”.
counters(name,
string)
Insert all the counters with the given namestring"." as the separator character.
counters(name,
string, style)
To change the counter style from the default
presentation as an integer, specify a style code,
such as lower-roman for lowercase
Roman numerals. The complete list of style codes is
given in Section 17.1, “The list-style-type property”.
open-quote
Adds the open quote character for the current level
of nesting. By default, double quote (“) is
used at the outer level, and single quote (‘)
for a quote inside a quote. If you want to specify
different quotes, see Section 12.10, “The quotes property: Specifying quote
characters”.
Use of this value increments the quote-nesting level.
close-quote
Adds the closing quote character for the current level of nesting. Use of this value decrements the quote-nesting level.
no-open-quote
Like open-quote, this value increments
the quote-nesting level, but it does not generate any
content.
no-close-quote
Like close-quote, this value
decrements the quote-nesting level, but generates no
content.
attr(aname)
Generates the value of the aname
For example, suppose your document's div elements of class dog have an
attribute dogname. This rule would
insert the value of that attribute, in parentheses,
as content after the rendering of the div:
div.dog
{ :after
{ " (" attr(dogname) ")"
}
}
These properties are used only inside generated content:
Use this property inside a :before or
:after pseudo-element to a counter to some
specific value. Counters are used for tasks such as
numbering sections of a document. You will pick a name
for each counter; names must conform to the usual rules
for HTML and XML elements.
The counter-reset property may have any of
these values:
nameThe named counter is reset to zero.
name int
The named counter is set to the value specified
by the integer int
Examples:
counter-reset: chapter-no; counter-reset: section-no 10;
The first example sets the counter named chapter-no to zero. The second example sets
counter section-no to ten.
This property adds some number to a counter. Values may have either of two forms:
nameThe named counter is incremented by one.
name intThe given integer is added to the named counter.
Examples:
counter-increment: chapter-no; counter-increment: section-no 10;
The first example adds one to the counter named chapter-no. The second example adds ten to the
counter named section-no.