Creating Pseudo-Elements

Besides using elements as selectors for rules, you can use pseudo-elements. Two pseudo-elements exist in CSS1: first-letter , which refers to the first letter of a block of text, and first-line , which refers to the block's first line. Two more pseudo-elements were introduced in CSS2 before and after , which let you specify what should go immediately before and after elements. You use these pseudo-elements like this: P:first-letter to refer to the first letter of a <P> element.

Here's an example. In this case, I'm styling the first letter of <P> elements to be larger than the rest of the text and to be a "drop cap," which means that it'll appear lower than the rest of the text on the first line (I'll specify that the top of the first letter should align with the top of the rest of the text on the first line with vertical-align : text-top , and we'll see how this works later in the chapter):

Listing ch09_05.css

 TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10}  P:first-letter {font-size: 18pt; float: left; vertical-align: text-top}  

These pseudo-elements are not implemented in Internet Explorer, but they are implemented in Netscape Navigator 6. You can see this stylesheet applied to the XML document in Figure 9-4.

Figure 9-4. Using pseudo-elements in Netscape Navigator 6.

You can also use the before and after pseudo-elements to specify what comes before or after another element. In this case, I'm adding a line of hyphens and asterisks after the <P> element (the \A characters refer to line breaks A is the hexadecimal digit for 10 decimal, and that's the UTF-8 code for a line-feed character.)

 P:after {content: "\A-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*\A"}