Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

:before (CSS selector)

Browser support full matrix
IE7 FF1+ Saf1.3+ Op9.5+
None Partial Full Full
Spec
Version
CSS2

Example

In this example, the text “You are here:” is rendered before the document element with the id value of "breadcrumbs", and given a right margin value of 0.5em:

#breadcrumbs:before {
  content: "You are here:";
  margin-right: 0.5em;
}

Try it yourself!View all demos

Description

This pseudo-element represents generated content rendered before another element, and is used in conjunction with the content property. Additional properties can be specified to style the pseudo-element. Note that the generated content is only rendered—it doesn’t become part of the document tree.

Compatibility

IE5.5None
6.0None
7.0None
Firefox1.0Partial
1.5Partial
2.0Partial
Safari1.3Full
2.0Full
3.0Full
Opera9.2Buggy
9.5Full

In Firefox versions up to and including 2, this pseudo-element is not fully stylable, most notably when it comes to applying positioning properties. Firefox appears to have implemented the original CSS2 specification.

In Firefox 1.5 and 2, this pseudo-element doesn’t work for fieldset elements.

In Opera 9.2, whitespace is always displayed within this pseudo-element as if it’s preformatted text—like whitespace in an HTML <pre> tag.

Related Reading

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters