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 } |