CSS 2.1 offers a few additional—and sometimes interesting—properties. They let you enhance your web pages with special content and cursors, offer more control over how a page prints, and so on. (Unfortunately, browser understanding of these properties is spotty at best.)
Specifies text that appears either before or after an element. Use this property with the :after or :before pseudo-elements. You can add an opening quotation mark in front of quoted material and a closing quotation after the quote. Internet Explorer 6 and 7 don't understand this property, so its use is limited.
Values: Text inside of quotes "like this," the keywords normal, open-quote, close-quote, no-open-quote, no-close-quote. You can also use the value of an HTML attribute. (See Hiding Unwanted Page Areas for an example.)
Examples: p.advert:before { content: "And now a word from our sponsor…"; }
a:after { content: " (" attr(href) ") "; }Adding text in this way (like the opening and closing quote example) is called generated content. Read a simple explanation of the generated content phenomenon at www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html. For a deeper explanation, visit www.w3.org/TR/CSS21/generate.html.
Lets you change the look of the mouse pointer when it moves over a particular element. You can make a question mark appear next to the cursor when someone mouses over a link that provides more information on a subject (like a word definition).
Values: auto, default, crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress. You can also use a URL value to use your own graphic as a cursor (but see the Note below). The look of a cursor when mousing over a link is pointer, so if you want to make some element on the page display the "click me" icon, you can add the declaration cursor: pointer to the style.
Example: cursor: help;
cursor: url(images/cursor.cur);
Not all browsers recognize URL cursor values. For more information, visit www.quirksmode.org/css/cursor.html.
Specifies the minimum number of lines of text that can be left at the bottom of a printed page. Suppose you're printing your web page on a laser printer, and a five-line paragraph is split between two pages, with just one line at the bottom of page one, and the four remaining lines at the top of page two. Because a single line all by itself looks odd (sort of like a lost orphan—get it?), you can tell the browser to break a paragraph only if at least, say, three lines are left on the bottom of the page. (At this writing, only the Opera browser understands this property.)
Values: a number like 1, 2, 3, or 5.
Example: orphans:
3;
Determines whether a page break (in printing) occurs after a particular element. With it, you can make sure that a particular paragraph is always the last item to appear on a printed page.
Values: auto, always, avoid, left, right. Auto represents the normal value and lets the browser determine when and how to break content across printed pages. Always forces the element that follows to appear at the top of a separate printed page, and it's the only value that works consistently across browsers. Avoid prevents a page break after an element; it's a great way to keep a headline with the paragraph that follows it, but unfortunately, most browsers don't understand it. Left and right determine whether the element following appears on a left- or right-handed page, which may force the browser to print an extra empty page. But since no browsers understand these values, don't worry about wasting paper. Browsers treat left and right the same as always.
Example: page-break-after: always;
Works like page-break-after, except the page break appears before the styled element, placing it at the top of the next printed page. You can use this property to make sure headlines for different sections of a long web page each appear at the top of a page.
Values: same as page-break-after.
Example: page-break-before: always;
Prevents an element from being split across two printed pages. If you want to keep a photo and its caption together on a single page, wrap the photo and caption text in a <div> tag, and then apply a style with page-break-inside to that <div>. (At this writing, only Opera understands this property.)
Values: avoid
Example: page-break-inside: avoid;
The opposite of orphans, it specifies the minimum number of lines that must appear at the top of a printed page. Say the printer can manage to fit four out of five lines of a paragraph at the bottom of a page and has to move the last line to the top of the next page. Since that line might look weird all by itself, use widows to make the browser move at least two or three (or whatever number of) lines together to the top of a printed page. (Only Opera understands this property, so it's of limited use.)
Values: a number like 1, 2, 3 or 5.
Example: widows:
3;