Collected by
Elizabeth Janson
Home Page

:before and :after

The latest news is that most Browsers do not recognise these two pseudo-elements, with their associated 'content', 'run-in' or 'compact' elements.

The :before and :after pseudo-elements

The browsers are not sure about these CSS2 elements, yet.
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

The 'content' property is used with the :before and :after pseudo-elements to generate content in a document.

Examples
1. Text content (see the section on strings).
2. Counters may be specified with two different functions: 'counter()' or 'counters()'.
3. open-quote and close-quote values are replaced by the appropriate string from the 'quotes' property.

Interaction of :before and :after with 'compact' and 'run-in' elements

The following cases can occur:

A 'run-in' or 'compact' element has a :before pseudo-element of type 'inline': the pseudo-element is taken into account when the size of the element's box is computed (for 'compact') and is rendered inside the same block box as the element.
A 'run-in' or 'compact' element has an :after pseudo-element of type 'inline': The rules of the previous point apply.
A 'run-in' or 'compact' element has a :before pseudo-element of type 'block': the pseudo-element is formatted as a block above the element, and does not take part in the computation of the element's size (for 'compact').
A 'run-in' or 'compact' element has an :after pseudo-element of type 'block': both the element and its :after pseudo-element are formatted as block boxes. The element is not formatted as an inline box in its own :after pseudo-element.
The element following a 'run-in' or 'compact' element has a :before of type 'block': the decision how to format the 'run-in'/'compact' element is made with respect to the block box resulting from the :before pseudo-element.
The element following a 'run-in' or 'compact' element has an :before of type 'inline': the decision how to format the 'run-in'/'compact' element depends on the 'display' value of the element to which the :before is attached.

Sorry, I can not generate working examples.

Here is an example of a 'run-in' header with an :after pseudo-element, followed by a paragraph with a :before pseudo-element. All pseudo-elements are inline (the default) in this example. When the style sheet:

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

is applied to this source document:

<H3>Centaurs</H3>
<P>have hoofs
<P>have a tail

The visual formatting hopefully will resemble:

Centaurs: ... have hoofs
... have a tail

We see the code formatted as:

Centaurs

have hoofs

have a tail

Another example

Markers are created by setting the 'display' property to 'marker' inside a :before or :after pseudo-element. While 'block' and 'inline' :before and :after content is part of the principal box generated by the element, 'marker' content is formatted in an independent marker box, outside the principal box. Marker boxes are formatted as a single line (i.e., one line box), so they are not as flexible as floats. The marker box is only created if the 'content' property for the pseudo-element actually generates content. Marker boxes have padding and borders, but no margins.

         P.Note:before         { 
  	      display: marker;
	      content: url("note.gif") 
                       "Note " counter(note-counter) ":";
              counter-increment: note-counter;
              text-align: left;
              width: 10em;
         }

This is a long preceding paragraph ...

This is a very short document with word 'Note'.

This is a long following paragraph ...

More tempting ideas

Markers: the 'marker-offset' property :before or :after

Not so friendly in IE5

Markers are created by setting the 'display' property to 'marker' inside a :before or :after pseudo-element.
While 'block' and 'inline' :before and :after content is part of the principal box generated by the element, 'marker' content is formatted in an independent marker box, outside the principal box.
Marker boxes are formatted as a single line (i.e., one line box), so they are not as flexible as floats. The marker box is only created if the 'content' property for the pseudo-element actually generates content.

Marker boxes have padding and borders, but no margins.

The next example creates markers before and after list items.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers before and after list items</TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before { 
   	      display: marker;
	      content: url("smily.gif");
         LI:after {
	      display: marker;
   	      content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

should produce something like this (ascii art is used instead of smiley gif images here):

  :-) first list item 
      comes first      :-(
  :-) second list item 
      comes second     :-(

In real life, I can't get it to work, used

and

first list item comes first
second list item comes second

Email
CSS begins here

Back to markers or on to tool-tip pop-up messages.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.