CSS Pocket Reference, 3rd Edition

Pseudo-Classes and Pseudo-Elements

:active

Type:

Pseudo-class.

Applies to:

An element that is being activated.

Description:

This applies to an element during the period in which it is being activated. The most common example is clicking on a hyperlink in an HTML document: while the mouse button is being held down, the link is active. There are other ways to activate elements, and other elements can in theory be activated, although CSS doesn’t define them.

Examples:

a:active {color: red;}
*:active {background: blue;}

Supported by:

Firefox, Internet Explorer, Opera 6+, Safari.

:after

Type:

Pseudo-element.

Generates:

A pseudo-element containing generated content placed after the content in the element.

Description:

This allows the author to insert generated content at the end of an element’s content. By default, the pseudo-element is inline, but it can be changed using the property display.

Examples:

a.external:after {content: " " url(/icons/globe.gif);)
p:after {content: " | ";}

Supported by:

Firefox, Opera, Safari.

:before

Type:

Pseudo-element.

Generates:

A pseudo-element containing generated content placed before the content in the element.

Description:

This allows the author to insert generated content at the beginning of an element’s content. By default, the pseudo-element is inline, but that can be changed using the property display.

Examples:

a[href]:before {content: "[LINK] ";)
p:before {content: attr(class);}
a[rel|="met"]:after {content: " *";}

Supported by:

Firefox, Opera, ...