Pseudo-elements

Pseudo-elements allow you to style information that is not available in the document tree. For instance, using standard selectors there is no way to style the first letter or first line of an element's content.

":first-line" and ":first-letter"

These two pseudo-element selectors are based on traditional typesetting, where the first letter or the first line of text appears different to all other text on a page.

:first-line is the selector for the first line of an element, like a paragraph.

p:first-line {font-weight: bold; }

:first-letter is the selector for the first letter of an element, like a paragraph.

p:first-letter {font-size: 200%; font-weight: bold; }

":before" and ":after"

These two pseudo-element selectors are used to insert generated content either before or after an element on the page. For extensive overview of generated content, read Advanced CSS Ornamentation.

Pseudo-elements ":before" and ":after" are not supported by Windows Internet Explorer 5, 5.5 and 6 or Macintosh Internet Explorer 5. They are also not supported by earlier versions of Opera.

Further information

Should you use ID or class? »

Other Max Design articles and presentations
Associated with webstandardsgroup.org