The :before pseudo-element specifies generated content that will occur
before an element's document tree content (there is also a companion
:after Pseudo-element for placing generated
content after an element.) This Pseudo-element is used in conjunction with the
'content' property to
specify what is to be inserted. Generated content is not a new concept -
it already plays an important role in the list mechanisms of HTML; in CSS
it has the potential to be very useful in Aural and other rendering media as well.
There are several rules governing the behavior of generated content and
:Before Pseudo-elements:
The box model for rendering elements includes the generated content
(eg: 'border' properties are rendered surrounding the element
AND the generated content.)
Properties for the Pseudo-element are inherited from the element they
are attached to.
If the element that the :before Pseudo-element is attached to is a
block level element, values for the 'display' property are limited to
'none', 'inline', 'block', and 'marker'. If any other value is used,
it will be interpreted as if it were 'block'.
If the element that the :before Pseudo-element is attached to is an
in-line element, values for the 'display' property are limited to 'none'
and 'inline'. If any other value is used, it will be interpreted as
if it were 'inline'.
Example
Ext/Doc: em:before {
content: url("ding.wav") }
In-Line: NA
Notes
CSS2 states that the 'float', 'list', 'position' and table properties
should be ignored by browsers if they are applied to the :before
Pseudo-element.
CSS2 notes that the special syntax combination of :first-letter or
:first-line Pseudo-elements paired with :before applies to the generated
content as well as to the first letter or line of the element.
:Before interaction behavior with 'compact' and 'run-in' elements:
A :before Pseudo-element is attached to an in-line 'run-in' or 'compact'
element - the element's rendering box will include the Pseudo-element.
An :after Pseudo-element is attached to a block level 'run-in' or 'compact'
element - the pseudo-element is rendered as a block above the regular
element content, and is not a part of the element's box size calculation.
An element that comes directly after a 'run-in' or 'compact' element
has an attached :before Pseudo-element with an in-line or block level
display behavior - Rendering of the run-in/compact element is
dependent on the subsequent element/Pseudo-element.