Web Design in a Nutshell, 3rd Edition

Pseudoelements

Pseudoelement selectors work as though they are inserting fictional elements into the document structure for styling. Pseudoelements are generally parts of an existing element based on context, such as its first line or first letter. Four pseudoelements are included in CSS 2.1:

:first-line

As it sounds, this selector applies a style rule to the first line of the specified element. The properties for the :first-line pseudoelement are limited to color, font, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, and text-shadow.

The following code adds extra letter spacing in the first line of text for every paragraph:

    p:first-line {letter-spacing: 6pt;}

:first-letter

Attaches a style to the first letter of an element. The properties for :first-letter are limited to font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height, and float. CSS 2.1 added the letter-spacing and word-spacing properties to this pseudoclass.

The following sample makes the first letter of any paragraph classified as “opener” big and red:

    p.opener:first-letter {font-size: 300%; color: red;}

:before and :after

CSS 2 introduced these pseudoelements that insert generated content before and/or after a specified element and declare a style for that content.

This example inserts exaggerated quotation marks before and after a blockquote (&8220; and &8221; are the character entities for left and right curly ...