:before (CSS selector)

Spec
Version
CSS2
Browser support (more…)
IE8+ FF3.5+ SA1.3+ OP9.5+ CH2+
Buggy Full Full Full Full

Syntax

:before {
declaration block
}

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 although the generated content of course will inherit properties from it’s parent.

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;
}
Note: The double colon syntax ::for pseudo-elements is CSS3-only. CSS2.x uses a single colon for both pseudo-elements and pseudo-classes. Therefore support for the single colon version is shown as full in the compatibility table above even if the browser doesn’t support the double colon syntax.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None Buggy Partial Partial Partial Partial Full Full Full Full Full Buggy Full Full Full

In Firefox versions up to and including 2, this pseudo-element is not fully stylable, most notably when it comes to applying positioning properties. There are also various bugs with overflow and float. 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.

In Internet Explorer version 8 the text-align values are not correctly inherited which would be evident if the generated content’s display was set to block. It would be necessary to also set the text-align values on the generated content to match those of the parent. This bug applies to both the :before and :after pseudo elements.

Internet Explorer version 8 doesn’t support the double colon syntax.

Previous / Next page

  1. Previous
  2. Next

Related reference material

  • content
    inserts content before or after an element

User-contributed notes

ID:
#5
Contributed:
by Louis Lazaris
Date:
Mon, 13 Jun 2011 22:15:05 GMT

In the description paragraph, after the long dash, it says:

"it doesn’t become part of the document tree although the generated content of course will inherit properties from it’s parent."

There should probably be a comma or something after the word "tree". But more importantly, the word "it's" should be corrected to "its".

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