Pseudo-elements 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, giving more power to the CSS author. Pseudo-elements
can also address generated content that is not in the source document (with the
'before' and 'after' pseudo-elements.) Pseudo-elements may only be applied to
external and document-level contexts - not to in-line styles.
CSS2 notes a few syntax caveats about pseudo-elements:
They may only appear AFTER the subject of the selector for a CSS rule.
(eg: After other classes and pseudo-classes - blockquote.foo:first-letter
{ color: red } )
(eg: Within a contextual selector - body p:first-line
{ margin-left: 2.0cm } )
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.
(eg: blockquote.foo:first-letter { color: red } blockquote.foo:first-line
{ margin-left: 0.5in } )
Browsers are allowed to support only a subset of CSS properties for the :first-line
and :first-letter pseudo-elements and still be considered legally 'conformant'.
Browsers are also allowed to ignore the :first-line and :first-letter pseudo-elements
completely in CSS selectors and still be considered legally 'conformant'.
Syntax
Ext/Doc: [element]:[pseudo-element]
{ property: value }