IN THIS CHAPTER
The Content Property
Numbering Elements Automatically
CSS works extremely well when you have concrete, single-state HTML elements to which to assign properties; but what happens when you want to assign certain properties to pieces of a document that aren't delimited by standard elements? In addition, there are times when it is convenient or necessary to automatically include generated content around elements. These out-of-bound cases are where CSS pseudo-elements come in handy.
This chapter introduces you to CSS pseudo-elements and generated content using CSS methods.
content property plays a key role in pseudo-elements, as it provides the actual content used by two pseudo-elements,
:after. The property itself is very simple and has the format
where "<text_gt_" is the text that comprises the content. Note that the text must be plain text—no markup or other content needing parsing—and it must be enclosed in quotes. The text itself will inherit the attributes of its parent element.
The next section examines the particulars of using the
content property with the
:after pseudo-elements, but use of the
content property is not limited to those two elements. For example, the
content property can be used to auto-generate content within any element. Consider the following code and the result shown in Figure 35.1 (the additional styles ...