Collected by Elizabeth Janson Home Page |
|
![]() The :before and :after pseudo-elementsThe 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 Interaction of :before and :after with 'compact' and 'run-in' elementsThe following cases can occur:
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 tailWe see the code formatted as: Centaurshave 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 ideasMarkers: the 'marker-offset' property :before or :afterNot so friendly in IE5Markers are created by setting the 'display' property to 'marker' inside
a :before or :after pseudo-element. 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 ![]() ![]()
|
Email CSS begins here |
|
This page is part of Elizabeth Janson's web site
http://www.oocities.org/elizatk/index.html
Tetbury residents in the Eighteenth Century my Australian Family History and Barrie, our Family Poet. |