 Regular
string content
Adding string content is done by wrapping the string in quotation after
the keyword "content:"
.headers:before{
content: ":: ";
color: red;
}
<h3 class="headers">This is header 1</h3>
<h3 class="headers">This is header 2</h3>
<h3 class="headers">This is header 3</h3>
Example:
The characters "::" is dynamically prefixed to class="headers" elements
with the above. Ain't it cool? Currently only literal string content is
supported in CSS2- if you try and include HTML code, for example, it will be
output literally instead of interrupted first. Generated content is not
considered actual content, and hence doesn't alter the document tree, for
those of you who work with the DOM.
Formatting the string content
If your string content contains quotations, they need to be back slashed
to prevent clashing with the main surrounding quotation:
P:before, P:after{content: "\""; font-size: 110%;}
If you don't see it yet, the above example adds an opening and closing
quotation mark to paragraphs.
If your string content is very long and you wish to insert a line break
when it's displayed, you'll need to use the escape sequence "\A":
P:before{content: "Line1 \A Line 2 \A Line 3 \A"};
Note that when tested, Firefox 1.0 doesn't yet seem to recognize "\A",
while Opera 7.5+ does.
Image
content (embedded objects)
The two pseudo-classes ":before" and ":after" also allow you include
images or other forms of embedded objects (ie: a midi file) through a URI
syntax. Lets say you want all external links on a page to be accompanied by
an arrow image to indicate they point to outside sites. I'll just assume
here any link with a "target" attribute present means it's an external link:
a[target]:after{
content: url(arrow.gif)
}
<a href="http://www.dynamicdrive.com" target="_new">DHTML</a>
Example (simulated):
DHTML
Image
and string content together
Some of you may already be wondering- "can I include both string and
image content?" Absolutely. Simply wrap your strings in quotations and your
embedded objects such as images using the URI syntax. Lets modify the above
example so there is a space between the link and the generated image that
follows it:
a[target]:after{
content: " " url(arrow.gif)
}
Other
types of embedded objects
Now, to be technically correct, the URI syntax supports embedded objects
with which image is just one of them, though the chances are you'll quickly
forget that. You could, for example, include a music file, though it would
have to be in the correct context, in this case, when the page is aurally
rendered (for the blind). The @media rule is needed in situations like this:
@media aural{
BLOCKQUOTE:after{
content: url("musicfile.mid")
}
}
|
