| A pseudo-element is a specific, unique part of an elementsuch as the first letter or first line of a paragraphthe appearance of which can be controlled independent of the rest of the element. For a list of other pseudo-elements, see Table 2.4. Table 2.4. Pseudo-ElementsPSEUDO-ELEMENT | DESCRIPTION | COMPATIBILITY |
|---|
:first-letter | First letter in element | IE5[*], FF1, O3.5, S1, CSS1 | :first-line | First line of text in element | IE5[*], FF1, O3.5, S1, CSS1 | :after | Space immediately before element | FF1, O5, S1, CSS2 | :before | Space immediately after element | FF1, O5, S1, CSS2 |
[*] IE5.5 for Windows
Styling the First Letter of an Element You can access the first letter of any block of text directly using the :first-letter pseudo-element. In this example (Figure 2.44), the first letter of paragraphs given the dropCap class will be made much larger, bolder, red, and will float to the left of the rest of the text in the paragraph. Figure 2.44. The drop cap is applied to the first letter of the paragraph, making it large, a different font, red, and floating next to the paragraph. 
To set a drop cap: | | 1. | p {...}
Although not required, it's generally a good idea to set the default style of the selector for which you will be styling the :first-letter pseudo-element (Code 2.22).
Code 2.22. The first letter of paragraphs given the .dropCap class will stand off from the rest of the paragraph.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Styling the First-letter of an Element</title> <style type="text/css" media="all"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #fff; margin: 8px; } #navigation { width: 240px; margin: 0px 8px 8px 0px; border: 3px solid #ccc; float: left; font: small Arial, Helvetica, sans-serif; } p { line-height: 150%; } p.dropCap:first-letter { font: bold 700% 'party let', 'comic sans MS', fantasy; margin-right: 12px; color: red; float: left; } .dropBox { width: 228px; padding: 6px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; } </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER IX <span >The Lobster Quadrille</span></h2> </div> <div > <p >The Mock Turtle sighed deeply, and drew the back of one flapper across his eyes...</p> <div > <img src="/books/3/292/1/html/2/alice36a.gif" height="258" width="220" alt="" /> 'Change lobster's again!' yelled the Gryphon at the top of its voice. </div> <p>'You may not have lived much under the sea--' ('I haven't,' said Alice)...'</p> </div> </body></html>
|
| 2. | p.dropCap:first-letter {...}
Type the selector (HTML, class, or ID) of which you want to style the first letter, a colon (:), and then first-letter.
In this example, we are using a dependent class, so we will need to set the class in the relevant tag (see "Defining Classes for Any Tag" earlier in this chapter).
| 3. | <p >...</p>
Add the class attribute to the relevant HTML tag. Although you do not have to use a class, generally, you will want to be able to selectively style the first letter of elements rather than styling them all universally.
|
 Tips
Drop-cap-style letters are a time-honored way of starting a new section or chapter of lengthy text by making the first letter of a paragraph larger than subsequent letters, and moving the first several lines of text over to accommodate the larger letter. Medieval monks used drop caps with illuminated manuscriptsnow you can use them on the Web. To avoid odd positioning, it's a good idea to clear floating in the paragraph immediately after the paragraph with the drop cap in it. To do this, add clear:left to the paragraph, either as an inline style or as part of a class or ID. Earlier versions of Internet Explorer render floating letters with their baselines flush with the rest of the text (that is, the bottoms of letters on the same line). Therefore, the letter styled with dropCap does not actually drop down. Although I set the drop cap up as a class, in theory, you could actually just assign this to the paragraph tag, but then all paragraphs in the document would have a drop cap, which is not usually desirable. A better alternative than using a class to create the drop cap would be to use the first-child selector (see the previous section) to tell paragraph tags to use the drop-cap style only if immediately preceded by a heading level 3 <h3> tag: p:first-child p:first-letter {...}Thus, only the first paragraph after a header would receive the drop cap. But, alas, earlier versions of Internet Explorer for Windows do not support first-child selectors.
Styling the First Line of an Element Like the first letter of an element, the first line of any block of text can be isolated for style treatment using the :first-line pseudo-element. In the example (Figures 2.45 and 2.46), the first line of paragraphs that have been assigned the .firstPage class become much larger, bolder, and redder and than rest of the text in the paragraph. Figure 2.45. The first line of text in the paragraph is larger, italicized, and red. 
Figure 2.46. Even when the text is narrower, only the first line is styled. 
To style the first line of text: 1. | p {...}
Although not required, it's generally a good idea to set the default style for the selector for which you will be styling the :first-line pseudo-element (Code 2.23).
Code 2.23. The first line of text in a paragraph that receives the .firstGraph class will stand off from the rest of the text, providing an easy visual clue for where to start reading. | 2. | p.firstPage:first-line {...}
Type the selector (HTML, class, or ID) for which you want to style the first letter, a colon (:), and then first-line. In this example, we are using a dependent class, so we will need to set the class in the relevant tag (see "Defining Classes for Any Tag" earlier in this chapter).
| 3. | <p >...</p>
Add the class attribute to the relevant HTML tag. Although you do not have to use a class, generally, you will want to be able to selectively style the first line of a single element rather than styling all of the same element types universally.
|
Setting Content Before and After an Element The :before and :after pseudo-elements can be used to generate content that appears above or below a particular selector. Generally, though, these pseudo-classes are used with the content property (see "Adding Content Using CSS" in Chapter 10). The pseudo-elements let you add and style repetitive content to the page consistently. In this simple example (Figure 2.47), I've simply added a little red text before and after the second level headings. Notice, though that it does not appear in the HTML code, only in the CSS. Figure 2.47. CSS generates content that is placed before and after the chapter title when displayed in the Web browser, but it never appears in the HTML code. 
To set content before and after an element: | | 1. | h2 {...}
Although not required, it's generally a good idea to set the default style of the selector for which you will be styling the :before and :after pseudo-elements (see Code 2.24 on the next page).
Code 2.24. Content can be added before and/or after an element.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Setting the Style Before and After an Element</title> <style type="text/css" media="all"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #fff; margin: 8px; } #navigation { width: 240px; margin: 0px 8px 8px 0px; border: 3px solid #ccc; float: left; font: small Arial, Helvetica, sans-serif } h2 { color: #966; } h2:before { content: 'This is before...'; color: red; } h2:after { content: '...and this is after'; color: red; } .dropBox { width: 228px; padding: 6px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; } </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER IX <span >The Lobster Quadrille</span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice36a.gif" height="258" width="220" alt="" /> 'Change lobster's again!' yelled the Gryphon at the top of its voice. </div> <p >The Mock Turtle sighed deeply...</p> </div> </body></html>
|
| 2. | h2:before {...}
Type the selector (HTML, class, or ID) you want to add content before, a colon (:), and then the keyword before. Next you will need to declare the content property and define what generated content goes before the element and how it should be styled.
| 3. | h2:after {...}
Type the selector (HTML, class, or ID) you want to add content after, a colon (:), and then the keyword after. Next you will need to declare the content property and define what generated content goes after the element and how it should be styled.
|
|
