Chapter 35. Pseudo-Elements and Generated Content
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? These out-of-bound cases are where CSS pseudo-elements come in handy.
Also, there are times when it is convenient or necessary to automatically include generated content around elements.
This chapter introduces you to CSS pseudo-elements and generated content using CSS methods.
The Content Property
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 following format:
"<text>" 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 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 property can be used to
autogenerate content within any element. Consider the following code and the result shown in Figure 35-1. (The additional styles for the ...