Advanced Pseudo-Elements


The first-line and first-letter pseudo-elements select a part of an element (discussed in the section, "The first-letter and first-line pseudo-elements"). The before and after pseudo-elements go further: They actually add new parts to an element. Here are a few examples. (The full discussion can be found in Chapter 6.)

The before and after pseudo-elements are used together with the content property, which determines what text goes into the pseudo-element. The first example adds the word "Note" in front of every paragraph of class "note":

 P.note:before { content: "Note." } 

If the element to which the pseudo-element is added is itself a block element, the pseudo-element can also be made a block. In other words, it is possible to add a paragraph. The following example adds a centered line "The end" between two horizontal rules at the end of the document:

 BODY:after {   content: "The end";   display: block;   border-top: solid thin;   border-bottom: solid thin } 



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net