HTML, XHTML, and CSS Bible, Fourth Edition

Chapter 35. Pseudo-Elements and Generated Content

IN THIS CHAPTER

• The content property

• Pseudo-elements

• Quotation marks

• 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

The CSS content property plays a key role in pseudo-elements, as it provides the actual content used by two pseudo-elements, :before and :after. The property itself is very simple and has the following format:

content: "<text>"

where "<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 :before and :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 ...