CSS Pseudo Elements | CSS: Presentation Layer
Standards Based Development
Pseudo Elements are used to address sub-parts of elements. They allow you to set style on a part of an element's content beyond what is specified in the documents. In other words they allow logical elements to be defined which are not actually in the document element tree. Logical elements allow implied semantic structure to be addressed in css selectors.
Note: Pseudo Elements may only be applied to external and document-level contexts - not to in-line styles. Pseudo Elements are restricted in where they can appear in a rule. They may only appear at the end of a selector chain (after the subject of the selector). They should come after any class or ID names found in the selector. Only one pseudo element can be specified per selector. To address multiple pseudo elements on a single element structure, multiple style selector/declaration statements must be made.
Pseudo Elements can be used for common typographic effects such as initial caps and drop caps. They can also address generated content that is not in the source document (with the "before" and "after") An example style sheet of some Pseudo Elements with properties and values added follows.
/* The following rule selects the first letter of a heading 1 and sets the font to 2em, cursive, with a green background. First-letter selects the first rendered letter/character for a block-level element. */
h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}
/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */
p:first-line {
font-weight : bold;
}
/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */
blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}
/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */
q:before {
content : open-quote;
}
/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */
q:after{
content : close-quote;
}
Pseudo Elements match virtual elements that don’t exist explicitly in the document tree. Pseudo Elements can be dynamic, inasmuch as the virtual elements they represent can change, for example, when the width of the browser window is altered. They can also represent content that is generated by css rules.
In css1 and css2, pseudo elements start with a colon (:), just like pseudo classes. In css3, pseudo elements start with a double colon (::), which differentiates them from pseudo classes.
css1 gave us :first-letter and :first-line; css2 gave us generated content and the :before and :after pseudo elements; and css3 added ::selection.