O'Reilly logo

CSS Pocket Reference, 3rd Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required